How to make floating divs the height of the tallest element for each row

Question

I have a bunch of blocks of tables shown in picture.

The block has the following css

.block {
    float: left;
    width: 50%;
}

And they are all wrapped within a wrapper

<div class="wrapper">
    <div ng-show="condition1" class="block"></div>
    <div ng-show="condition2" class="block"></div>
    <div ng-show="condition3" class="block"></div>
</div>

1. Each block's height is dynamic depending on the content.
2. Each block can show or not show depending on condition. As you can see, it is possible that the second block won't show, and the third block will be pushed up to align with the first block.
3. There will always be at most 2 blocks per "row"
4. There will be alot more of these blocks in the future.

Now, what i want to achieve is for each row, set the the block with the smaller height to be the same height as the block with greater height. I am not sure how to approach this using CSS. If it is not possible, what would be the best way to approach this using jquery?

I spent countless hours and could not figure out (at least using CSS). All of the statements above are requirements and cannot be changed. Any expert help would be appreciated.

Answer 1

You may want to look at flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox can be used to stretch child elements based on the parent's size.

Here's a quick test I did in jsfiddle

https://jsfiddle.net/7Lknyxqr/

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

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