Image + Text - Balanced Pair

by Hugo Vale Pereira

HTML

<div class="container">
  <div class="content">
    <img src="https://picsum.photos/600/1200" 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>

<div class="container">
  <div class="content">
    <img src="https://picsum.photos/600/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

.container {
  display: flex;
  justify-content: center;
  margin: 30px;
}

.content {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Ensures equal width */
  align-items: center;
  max-height: 50vh;
  width: auto;
  position: relative;
}

p {
  max-height: 50vh;

  position: absolute;
  grid-column: 2/-1;
  outline: 1px solid blue;
  height: 100%;
}

img {
  max-height: 50vh;
  width: 100%;
  height: auto;
 
}