JSFiddle - React, Tailwind, and code Playground

by Stafox

HTML

<div class="wrapper">
  <div class="item">
    <img src="http://placehold.it/2048x2732" />
  </div>
  <div class="item">
    <img src="http://placehold.it/2048x2732" />
  </div>
</div>

<div class="wrapper">
  <div class="item">
    <img src="http://placehold.it/2048x2732" />
  </div>
</div>

<div class="wrapper">
  <div class="item horizontal">
    <img src="http://placehold.it/2732x2048" />
  </div>
</div>

CSS

.wrapper {
  width: 300px;
  background-color: #fff;
  display: flex;
  padding: 15px 0;
  //height: 188px;
  justify-content: center;
}

.item {
  width: 50%;
  margin-left: 10px;
}
.item:first-child { margin-left: 0;}
.item img {
  max-width: 100%;
  object-fit: contain;
}
.item.horizontal { width: 100% }