Display Grid Image & Text Side by Side-CodePudding

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

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 :)

CodePudding user response：

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

CodePudding user response：

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.