JSFiddle - React, Tailwind, and code Playground

HTML

高さを揃えた状態
<div>
    <img src="https://placehold.jp/150x400.png" alt=""><img src="https://placehold.jp/3d4070/ffffff/200x300.png" alt=""><img src="https://placehold.jp/150x400.png" alt="">
</div>

<br>

div幅340px
<br>imgが改行されてしまう…<br>
そろった状態で、改行せず画面幅に対していっぱいに表示したい
<div class="w340">
    <img src="https://placehold.jp/150x400.png" alt=""><img src="https://placehold.jp/3d4070/ffffff/200x300.png" alt=""><img src="https://placehold.jp/150x400.png" alt="">
</div>

<br>

理想の見え方 幅が340pxのとき
<div class="w340_2">
    <img src="https://placehold.jp/150x400.png" alt=""><img src="https://placehold.jp/3d4070/ffffff/200x300.png" alt=""><img src="https://placehold.jp/150x400.png" alt="">
</div>

<br>

理想の見え方 幅が600pxのとき
<div class="w600">
    <img src="https://placehold.jp/150x400.png" alt=""><img src="https://placehold.jp/3d4070/ffffff/200x300.png" alt=""><img src="https://placehold.jp/150x400.png" alt="">
</div>

CSS

div img{
  height:250px;
}

.w340{
  width: 340px;
  background-color: #252525;
  }

.w340_2 img{
  height:200px;
  }
  
 .w600{
   width: 600px;
   background-color: #252525;
 }

.w600 img{
 height:423px;
  }