JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<main>
  <section>
    <ul class="flex-container">
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio. Praesent fringilla et leo scelerisque consequat. Pellentesque ornare, ligula non bibendum dapibus, nunc ex pretium nulla, in venenatis sem justo sed velit. Maecenas massa tortor, imperdiet non lacinia in, dapibus eu est. Sed eu ornare est. Proin sapien tellus, dictum a ex quis, egestas euismod justo. Phasellus metus nisi, suscipit a auctor quis, blandit vel dolor.</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
         ...

CSS

/* #region General Styling */

body {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

h2,
h3,
h4,
h6 {
  padding: 1em;
  margin: 0;
}

hgroup {
  margin: 1em;
  border: 1px solid black;
}

h2 {
  background-color: tomato;
}

h3 {
  background-color: gold;
}

h4 {
  background-color: dodgerblue;
}

h6 {
  background-color: mediumseagreen;
}


/* #endregion*/

.flex-container {
  display: flex;
  /* Top Level Flex-Container*/
  flex-wrap: wrap;
}

.flex-container > li {
  display: flex;
  /* This is both a Flex-item and a Flex-container */
  flex-basis: 33%;
}

.flex-container > li > hgroup {
  display: flex;
  /* This is both a Flex-item and a Flex-container  */
  flex-direction: column;
  flex: 1;
  /* Fill available space within its Flex-container */
}

h3 {
  flex: 1;
  /* Can grow to fill the available space within its Flex-container, you can instead just declare flex-grow: 1; too. */
}