'Display Grid Image & Text Side by Side

I want to display Image and text side by side but its being displayed down

Display Image & Text Side By Side

Here is the code pen link https://codepen.io/melwyn-mendonca/pen/RwQPKbp

Even on certain screen I want it to be displayed side by side.

What is wring with the CSS?

Thank you for your help :)

htmlcss


Solution 1:[1]

You just need to add a display: flex property to grid-item class in your CSS. Like this:

.grid-item {
  /* border-bottom: thin #edf1f2 solid; */
  padding: 22.85px 0px;
  display: flex;
  align-items: center;
}

Codepen: https://codepen.io/suru235/pen/OJQNwwp

Solution 2:[2]

How about using a table?

<table>
      <tr>
      <td>[image]</td><td>[content]</td>
      <td>[image]</td><td>[content]</td>
      <td>[image]</td><td>[content]</td>
      </tr>
      <tr>
      <td>[image]</td><td>[content]</td>
      <td>[image]</td><td>[content]</td>
      <td>[image]</td><td>[content]</td>
      </tr>
      
 </table>

You can also put styles inside a table.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suraj Sanwal
Solution 2 SHKim

Related Questions