JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrp">
<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>
</div>

CSS

.block_1, .block_2, .block_3, .block_4 {
  display: inline-block;
  
  box-sizing: border-box;
  
  word-spacing: normal;
  outline:1px solid red;
  text-align:center;
}
.wrp {
  display: table;
  
  width: 100%;
  
  word-spacing: -.36em;
}

.block_1 {
  min-width:100px;
  max-width: 100px;
}

.block_4 {
  min-width:150px;
  max-width: 150px;
}

.block_2, .block_3 {
  width: calc(50% - 125px);
}