JSFiddle - React, Tailwind, and code Playground

by Aleksandr Tomashov

HTML

<div class="f_parent">
<!--   <div class="f_child box1"><img src="https://webref.ru/assets/images/css/css_checked.png" alt=img height=50>
  </div> -->
  <div class="box1">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </div>
    <div class="box2">
      Lorem, ipsbus rem ut perferendis. Sapiente quisqitur, illo temporibus, architecto ab.
    </div>
</div>

CSS

.f_parent {
  display: flex;
  /*   flex-flow: row; */
  width: 100px;
  height: 300px;
  border: 1px solid;
}

.box1,
.box2 {
  border: 1px solid red;
  /*   width: 500px; */
}

.box1 {
  /*  flex-basis:300px; */
  flex-shrink: 2;
  flex-grow: 1;
}

.box2 {
  flex-shrink: 1;
  /*   flex-basis: 300px; */
  flex-grow: 1;
}