我得到这样的结果，但我想要一行中的 2 个 div 的图像和内容，并在另一行中休息。 我应该如何进行更改。
[div element on top of each other](https://i.stack.imgur.com/lyurr.jpg)
The code i tried for this is-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Cards UI Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="header">Responsive Cards UI Design</div>
<div class="card_item">
<div class="card_inner">
<div>
<div class="role_name">About company</div>
<div><img src="Rectangle1.png"></div>
</div>
<div class="role_name">Markets</div>
<span>
<div><img src="Rectangle2.png"></div>
<div class="role_name">Customers</div>
<div><img src="Rectangle3.png"></div>
</span>
<div class="role_name">Blogs</div>
<div><img src="Rectangle4.png"></div>
</div>
</div>
</div>
</body>
</html>
I want my result to be sorted of like this-
[images side by side](https://i.stack.imgur.com/9walC.jpg]
首先我必须确定这里只能使用 div 或者我们必须使用其他元素，然后如何让它们并排出现。