JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block_1">100 px</div>
<div class="block_2">должен быть 50%</div>
<div class="block_3">должен быть 50%</div>
<div class="block_4">150 px</div>

CSS

.block_1, .block_2, .block_3, .block_4 {
  border:1px solid red;
  display:inline-block;
  text-align:center;
}

.block_1 {
  width:100px;
}

.block_4 {
  width:150px;
}

.block_2, .block_3 {
  width:30%;
}