JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="container">
  <div class="content">
    <img src="https://picsum.photos/100/300" alt="image" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat
      explicabo, optio fugit beatae recusandae magnam maiores officia, delectus
      vero. Non id quibusdam rem ut voluptates ducimus ipsam, nemo adipisci
      dolorem consectetur ea, a illo provident illum laboriosam dicta mollitia
      eligendi porro assumenda sed temporibus voluptas eveniet quos! Adipisci,
      odit facilis?
    </p>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden; /* Prevents any overflow */
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Two equal columns */
  height: 100%; /* Fills the container's height (80vh) */
  width: auto;
  position: relative;
}

p, img {
  height: 100%; /* Each gets the full height of .content */
  width: 100%;  /* Each gets the full width of its grid cell */
  box-sizing: border-box;
  overflow: hidden;  /* Ensures no overflow if content is too large */
  outline: 1px solid blue;
  padding:20px;
  box-sizing: border-box;
}

p {
      position: absolute;
    /* padding: 1em; */
    grid-column: 2;
    grid-column: 2 / -1;
    margin: 0;
}

img {
  display: block;
  object-fit: contain;  /* Preserves original aspect ratio with letterboxing if needed */
}