Как сделать плавающие divs высотой самого высокого элемента для каждого ряда

Question

У меня есть куча блоков таблиц, показанных на картинке.

Блок имеет следующий CSS

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

И все они обернуты в обертку

<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. высота Каждый блок является динамическим в зависимости от содержания.
2. Каждый блок может показывать или не показывать в зависимости от состояния. Как вы можете видеть, возможно, что второй блок не будет отображаться, а третий блок будет выдвинут для выравнивания с первым блоком.
3. Всегда должно быть не более 2 блоков на «ряд»
4. В будущем будет много таких блоков.

Теперь, что я хочу достичь для каждой строки, установите блок с меньшей высотой на ту же высоту, что и блок с большей высотой. Я не уверен, как подойти к этому с помощью CSS. Если это невозможно, каким будет лучший способ приблизиться к этому с помощью jquery?

Я провел бесчисленные часы и не мог понять (по крайней мере, используя CSS). Все вышеприведенные утверждения являются требованиями и не могут быть изменены. Любая экспертная помощь будет оценена по достоинству.

Answer 1

Возможно, вы захотите посмотреть на flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox можно использовать для растягивания дочерних элементов на основе размера родителя.

Вот быстрый тест, который я сделал в 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; 
}