<div class="user">
  <img src="https://picsum.photos/id/64/200/250" alt="user name">
  <h2>Jane Doe</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed ante fringilla, rutrum turpis nec, sagittis massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque metus dui, cursus eu hendrerit eget, cursus sed tellus. Mauris congue vestibulum tristique. </p>
</div>
.user {
  --w:450px;
  --c:(100vw - var(--w));
  
  max-width:500px;
  background:#fff;
  margin:10px auto;
  border-radius:10px;
  overflow:hidden;
  padding:0 20px 0 clamp(20px,var(--c)*1000,180px);
  box-sizing:border-box;
  box-shadow:1px 2px 5px #0005;
  position:relative;
}
.user img {
  position:absolute;
  top:clamp(0px,var(--c)*-1000,10px);
  left:clamp(0px,var(--c)*-1000,20px);
  width:clamp(50px,var(--c)*1000,150px);
  height:clamp(50px,var(--c)*1000,100%);
  border-radius:clamp(0px,var(--c)*-1000,50px);
  object-fit:cover;
  object-position:top;
}
.user h2 {
  margin:20px 0 10px clamp(0px,var(--c)*-1000,70px);
}

body {
  background:pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.