<aside class="bio">
  <img class="avatar" src='https://images.unsplash.com/photo-1554727242-741c14fa561c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzExNDcxMjM&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <h2>Jane Stylesheet</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam aspernatur, nobis ex rem iure!</p>
</aside>

<aside class="bio">
  <h2>Bob Markup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam neque a blanditiis praesentium impedit.</p>
</aside>
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: system-ui;
  padding: 3vw;
  background-color: mediumvioletred;
}

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

:where(* + *) {
  margin-block-start: 1rem;
}

.bio :is(h2, p) {
  margin-block-start: 0;
}

.bio {
  background-color: white;
  display: grid;
  gap: 1rem;
  border-radius: 0.5rem;
  padding: 5%;
  box-shadow: 0 0 10px -2px hsl(0 0% 0% / 85%);
}

.bio:has(.avatar) {
  grid-template-areas: "avatar name" "avatar bio";
  grid-template-columns: min(25vw, 80px) 1fr;
}

.bio:has(.avatar) :not(.avatar) {
  grid-column: bio;
}

.bio .avatar {
  grid-area: avatar;
}

.avatar {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.