<ol class="cards">
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      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
    </div>
  </li>
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      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
    </div>
  </li>
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      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
    </div>
  </li>
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      Lorem ipsum dolor sit amet Lorem ispum dolo sit amet Lorem ipsum dolor sit amet Lorem ispum dolo sit
    </div>
  </li>
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      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
    </div>
  </li>
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      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
    </div>
  </li>
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      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
    </div>
  </li>
  <li>
    <span>A</span>
    <span>B</span>
    <div>
      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
    </div>
  </li>
</ol>
body {
  padding: 0;
  margin: 0;
}
.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0.5em;
  max-width: 67em;
  list-style: none;
  counter-reset: cardLi;
}
.cards > li {
  flex: 1 0 26%;
  margin: 0.5em;
  padding: 1em;
  max-width: 19em;
  min-width: 15em;
  counter-increment: cardLi;
  background: beige;
  border-radius: 1em;
}
.cards > li:before,
.cards > li > span {
  float: left;
  margin-right: 0.4em;
}
.cards > li:before {
  content: counter(cardLi) ".";
}
.cards > li > span {
  width: 1.25em;
  height: 1.25em;
  text-align: center;
  background: #c00;
  color: #fff;
}
.cards > li > span + span {
  background: #00f;
}
.cards > li > div {
  overflow: hidden;
  padding-left: 0.6em;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.