How to create a layout for a quote with image and caption? [closed]

Question

I want to have this layout:

My try:

.container{
  padding: 10 px;
  gap: 10 px;
  flex-direction: row;
}
figcaption{
  font-size: smaller;
  text-align: end;
}

<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim nam deserunt magni iure repudiandae aspernatur reprehenderit totam quia aut laborum quos, vel quis!</blockquote>

<figure class="container">
<figcaption>
  <strong>John Doe</strong><br>
  Long title blablablablabla<br>
  Company X
</figcaption>
<img class="col2" src="https://placehold.co/600x400">
<figure>

I don't know how to make it better. Can you help me improve it?

Answer 1

Something like this:

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
::before,
::after {
  box-sizing: inherit;
}

.wrap {
  display: flex;
  border: 1px solid green;
  gap: .25em;
  margin: 1em;
}
.details {
  display: flex;
  flex-direction: column;
}

.details blockquote {
  margin-bottom:auto;
  text-align: justify;
  display: flex;
  align-items: center;
}

blockquote:before, blockquote:after {
  content: '“';
  font-size: 4em;
  padding: 0 .25em;
}

blockquote:after  {
  align-self: end;
  content: '”';
}

.details div {
  align-self: end;
}

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

span {
  align-self: end;
}

<div class="wrap">
  <div class="details">
    <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim nam deserunt magni iure repudiandae aspernatur reprehenderit totam quia aut laborum quos, vel quis!</blockquote>
    <div><strong>John Doe</strong></div>
    <div>Long title blablablablabla</div>
    <div>Company X</div>
  </div>

  <div><img class="col2" src="https://placehold.co/600x400"></div>

</div>