JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="image-profile">
    <img class="image" src="https://placehold.jp/150x150.png" alt="" width="100px" height="100px">
    <div class="profile">男性</div>
  </div>
  <div class="text">ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。ここにテキストを入れます。</div>
</div>

CSS

.box {
  display: flex;
  padding: 10px;
  background-color: aqua;
  border-radius: 20px;
  width: 100%;
  height: auto;
}

.image-profile {
  width: 150px; /* 画像と文字を入れるコンテイナーのサイズ指定 */
  height: 150px; /* 画像と文字を入れるコンテイナーのサイズ指定 */
  margin-right: 10px; /* コンテイナーと文章の間の余白 */
  position: relative; /* 子要素の移動の基点に設定する */
  background-color: white;
  border-radius: 50%;
  overflow: hidden; /* 子要素のはみ出た部分は非表示にする */
}

.image {
  width: 100%; /* コンテイナーの横幅いっぱい（150%） */
  height: 100%; /* コンテイナーの高さいっぱい（150%） */
  object-fit: cover; /* ↑の指定だけだと、長方形の画像の場合縦横比が崩れた形で変形されてしまうので、親要素の形状に切り抜かれるようにする */
  /* padding: 10px; */
  /* margin: 10px; */
}

.profile {
  position: absolute; /* 親要素の上に重ねる */
  left: 50%; /* 左から50%の位置に移動（つまり右に移動） */
  bottom: 10px; /* 下から10pxの位置に移動 */
  transform: translateX(-50%); /* 右に行き過ぎているので、文字の長さの半分だけ左に移動 */
  text-align: center;
}

.text {
  width: calc(100% - 150px); /* 文章エリアの横幅は、親要素全体の幅から画像の幅を引いたもの */
}