JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:100%;">
  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">
    <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
      <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
        <div id="row" style=" padding-right: 2.330294%; "><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%">
        </div>
      </div>
      <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
        <div id="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
      <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
        <div id="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

  <div style="width:60%; display: flex;  margin-left: auto;  margin-right: auto;">

    <div id="outterrow" style="width:100%;  float:left; display: flex; padding-bottom: 1.15%; ">
      <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
        <div id="row" style=" padding-right: 2.640643%; "><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" sizes="100vw" width="100%"> </div>
      </div>
      <div id="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
        <div id="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
      </div>
    </div>
  </div>

</div>

CSS

img {
  vertical-align: bottom;
}