Flexbox

by sketchbookkeeper

HTML

<div class="wrapper">
    <div ng-show="condition1" class="block">
      <p>
      Data Data data!
      </p>
    </div>
    <div ng-show="condition2" class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum elit at dignissim pulvinar. Aliquam convallis orci ligula, varius venenatis augue facilisis a. Morbi scelerisque libero nec elementum accumsan. Morbi magna sem, aliquet vel convallis eget, laoreet id purus. Ut ac ornare tellus. Sed tincidunt tristique finibus. Vivamus ante ligula, pretium id malesuada quis, ultricies nec dui. Quisque ultrices nunc eget metus interdum, non facilisis ex vestibulum. Praesent tristique erat neque, at auctor nisi interdum nec. Phasellus pretium, lectus sed vehicula tempus, justo nisi placerat ex, et rhoncus augue dui id nibh. Integer ex lorem, convallis quis pulvinar eu, cursus cursus metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel urna pretium, sollicitudin diam a, porta diam. Nunc sapien turpis, consectetur ultricies diam id, faucibus tempus orci. Nunc eget sapien nec elit ultrices dictum vitae sed elit.</p>
    </div>
    <div ng-show="condition3" class="block">
      <p>Praesent  Quisque vel urna pretium, sollicitudin diam a, porta diam. Nunc sapien turpis, consectetur ultricies diam id, faucibus tempus orci. Nunc eget sapien nec elit ultrices dictum vitae sed elit.</p>
    </div>
    <div class="block">
      <p>Name</p>
    </div>
</div>

CSS

.wrapper{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
}

.block{
  width: calc(50% - 20px);
  background-color: #343;
  margin: 10px;
}