Revision history [back]

To arrange two divs alongside each other, you can use CSS flexbox or CSS grid. Here’s an example using flexbox:

HTML:

<div class="container">
  <div class="text">Some text goes here</div>
  <div class="image"> <img src="image.png"> </div>
</div>

CSS:

.container {
  display: flex;
  align-items: center;
}

.text {
  flex: 1;
  padding: 10px;
}

.image {
  flex: 1;
  text-align: center;
}

Explanation:

• The container element is set to display: flex to enable flexbox layout.
• The align-items property centers the two elements vertically.
• The .text and .image elements are both given a flex: 1 property, which means they will take up equal amounts of space inside the container.
• The .text element is given some padding to create some space around the text.
• The .image element is centered using the text-align property. You can also use justify-content property if you need to align elements horizontally.

This will display the text on the left and the image on the right, both elements side by side.