<div class="container">

  <p class="col col--1">First is loooooong.</p>

  <p class="col col--2">Second is looooonger.<br/>…<br/>…</p>

  <p class="col col--3">Third is short.</p>  

</div>

​

.container {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}

​

/* Pružná položka, zabírá jednu část volného místa: */

.col--1 {

  flex: 1;

}

​

/* Pružná položka, zabírá dvě části volného místa: */

.col--2 {

  flex: 2;

}

​

/* Fixně široká položka: */

.col--3 {

  flex: none;

}

​

@media (max-width: 400px) {

  .container {

    flex-direction: column;

  }

}

​

​

/* etc: */

​

body {

  margin: 1.5em;

  font-size: 130%;  

  background: #F2F0EC;

  color: #2E2C08;    

}

​

.container {

  border: 10px solid #2E2C08;

  padding: 1rem;

  background: white;

}

​

.col {

  background: #2E2C08;

  font-weight: bold;

  color: white;

  padding: 1em;

  margin: 2px;  

}