JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="block2">
    Block 2
  </div>
  <div class="block1">
    Block 
  </div>
</div>

<div class="wrap">
  <div class="block1">
    Block 
  </div>
  <div class="block2">
    Block 2
  </div>
</div>

<div class="wrap">
  <div class="block1">
    Block 
  </div>
  <div class="block2">
    Block 2
  </div>
  <div class="block3">
    Block 3
  </div>
</div>

CSS

* {
  box-sizing: border-box
}

.wrap {
  border: 2px solid red;
  display: -webkit-flex;
  display: flex;
  padding: 5px;
  margin-bottom: 10px;
}

.block1 {
  border: 2px solid blue;
  padding: 5px;
}

.block2 {
  border: 2px solid green;
  width: 100%;
  padding: 5px;
}