Html – How to make the following div center in CSS by centering these content and how the contents of the following should be placed together?

I’m trying to center the content with this text and image inside a div element horizontally and vertically. I’ve defined a width for the div, but the content remains aligned to the left/right edge by default and it should be paired or sticked with the image. How can I achieve a centered layout with placing each content closer using CSS same when it comes to vice versa? Here is the attached image:

Problem:
Problem Output Image

Solution:
Solution Output Image

Here is what I try and I was expecting that it will stick the contents to each other, same goes when it comes to vice versa:

HTML Code:

<div class="joron_description">
  <img src="/assets/about_img/joron-about_img.png" alt="Joron's Image">
  <div class="joron-text">
    <p>
      Joaquin Aaron P. Recio | The Lead Programmer of Hug Haven.
    </p>
  </div>
</div>

CSS Code:

.joron_description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.joron_description img {
    height: 229px;
    width: 210px;
    margin: 0 auto;
}

.joron_description .joron-text {
    background-color: rgb(7, 15, 43, 0.8);
    border-radius: 10px;
    text-align: center;
    padding: 10px 30px;
    margin: 0 auto;
}

I hope they are solutions so far in this problems, replies in this question is much appreciated! 🙂