TestFlexer Docket

by grippstick

HTML

<div class="container">


  <div class="fieldList">
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        This is a really long label that talks about the weather on kapedi plain. Maybe it rains, maybe you fuck yourself.
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
      This is a really long label that talks about the weather on kapedi plain. Maybe it rains, maybe you fuck yourself.
        </span>
    </div>
  </div>
  <div class="fieldList">
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        This is a really long label that talks about the weather on kapedi plain. Maybe it rains, maybe you fuck yourself.
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
           This is some medium length text
        </span>
    </div>
    <div class="item">
      <h3>
        Short Label
      </h3>
      <span>
      This is a really long label that talks about the weather on kapedi plain. Maybe it rains, maybe you fuck yourself.
        </span>
    </div>
    <div class="item">
      <h3>
        Short Label
    ...

CSS

.container {
  display: flex;
  flex-direction: row;
  border: solid green;
  width: 100%;
  flex-wrap: wrap;
}

.fieldList {
  display: flex;
  flex-direction: row;
  border: solid red;
  width: 49%;
  flex-wrap: wrap;
}

.item {
  border: solid blue;
  margin: 5px;
  flex-grow:1;
}