<ol class="grid">
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet</p>
    </div>
  </li>
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet</p>
    </div>
  </li>
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet </p>
    </div>
  </li>
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit</p>
    </div>
  </li>
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>LLorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet</p>
    </div>
  </li>
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet</p>
    </div>
  </li>
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo </p>
    </div>
  </li>
  <li>
    <div class="icon">A</div>
    <div class="icon icon2">B</div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit amet </p>
    </div>
  </li>

</ol>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
p {
  margin: 0 0 1rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: 1040px;
  margin: auto;
  padding: 0;
  gap: 1rem;
}
.grid {
  list-style: none;
  counter-reset: doc;
}
.grid > li {
  counter-increment: doc;
}
.grid > li:before {
  content: counter(doc) ". ";
}

.grid > li {
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 0.5rem;
  background: beige;
}

.icon {
  width: 20px;
  height: 20px;
  background: red;
  display: grid;
  justify-content: center;
  align-content: center;
}
.icon2 {
  background: blue;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.