<div class="col">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  <figure>
    <img src="dog-600x400.jpg" alt="" />
  </figure>
  <p>Ratione neque provident autem impedit veniam eaque. Illum voluptas culpa, fugit quod, quia assumenda animi beatae quibusdam voluptatum officiis laboriosam.</p>
</div>
<div class="col">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  <figure>
    <img src="dog-600x400.jpg" alt="" />
    <figcaption>Pretty pleeeeaassseee</figcaption>
  </figure>
  <p>Ratione neque provident autem impedit veniam eaque. Illum voluptas culpa, fugit quod, quia assumenda animi beatae quibusdam voluptatum officiis laboriosam.</p>
</div>

figure:has(figcaption) {
  border: 1px solid #333;
  padding: 0.5rem;
  border-radius: 12px;
  background: white;
  color: #555;
  box-shadow: 0 2px 4px 2px #ccc;
  img {
    margin-block-end: 0.5rem;
    border-radius: 7px;
  }
  figcaption {
    text-align: center;
    font-size: 80%;
    opacity: 0.8;
  }
}

img {
  display: block;
max-width: 100%;
}

body {
  background: #eee;
  color: #333;
  display: flex;
  gap: 4rem;
}