Как реализовать такую раскладку?

Question

[klonor]

чтобы 2 блок снизу прижимался наверх

Comments

[devstudent]

надо видеть код разметки и стилей для ответа

[klonor]

devstudent: codepen.io/tatarchap/pen/eZjONo

[devstudent]

klonor: ответ есть, высоту контенту ставить не нужно

Answer 1

[devstudent]

<div class="carte">
   <div class="overlay">
	<div class="carte__item">
	  <p> gojgiojirogjioegjeiogj gojgiojirogjioegjeiogj
	  </p>
	  </div>
	 <div class="carte__item">
	   <p> gojgiojirogjioegjeiogj gojgiojirogjioegjeiogj
	  </p>
	  </div>
  </div>
  <div class="overlay">
	 <div class="carte__item">
	  <p> gojgiojirogjioegjeiogj  
	  </p>
	  </div>
	 <div class="carte__item">
	  <p> gojgiojirogjioegjeiogj gojgiojirogjioegjeiogj gojgiojirogjioegjeiogj gojgiojirogjioegjeiogj
	  </p>
	  </div>
  </div>
</div>

@use postcss-nested;
@use cssnext;
.carte{
  width: 440px;
  text-align: center;
  vertical-align: bottom;
  font-size:0;
  &__item{
    width: 90%;
   font-size:20px;
   background:gray;
   display:inline-block;
   margin:20px auto 5px;
  }
}
.overlay {
  width: 50%;
  position: relative;
  display: block;
  float: left;
}

надо сделать обертку для каждого столбца контента

Answer 2

[Дмитрий Новиков]

masonry.desandro.com

Answer 3

[Alex]

.col{
  width: 45%;
  display:inline-block;
 float: left;
}

<div class="carte">
<div class="col">
<div class="carte__item">1</div>
 <div class="carte__item">2</div>
  </div>
  <div class="col">
 <div class="carte__item">3</div>
 <div class="carte__item">4</div>
</div>
 </div>