JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="flex-item">
    <div class="block1">
    longlonglonglonglonglonglonglonglonglonglonglonglonglong
    </div>
  </div>
  <div class="flex-item nos">
    <div class="block2">
    Display
    </div>
  </div>
</div>
<br/>
<div class="parent">
  <div class="flex-item">
    <div class="block1">
    longlonglonglonglong...
    </div>
  </div>
  <div class="flex-item">
    <div class="block2">
    Display
    </div>
  </div>
</div>

CSS

.parent{
  word-break:break-all;
  display:flex;
  flex-direction:row;
  width:15rem;
  background: yellowgreen;
  padding: 10px;
  overflow:hidden;
}

.flex-item{
  width: 10em;
  padding: 10px;
  background: yellow;
  
  flex: 1 1 50%;
}

.block1{
  background: red;
}

.block2{
  background: orange;
}

.nos{
  flex-shrink:0 !important;
}