put a header, paragraph and an image next to each other

i am trying to put some text with h3 as a title parallel to an image
i managed to get the image and the text to do that, the problem is i cant get my h3 on top of the text

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#box {
    display: flex;
    align-items: center;
    width: 950px;
    margin:auto;
    margin-top: 30px;
}

#box p {
    margin-right: 1em;
}

<!-- language: lang-html -->

            <div id="box">
                <h3>lorem ipsum</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </p>
        
                <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
            </div>

<!-- end snippet -->

This is what i want it to essentialy look like with the h3 as title

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/*only for demonstration*/
body{
  margin-left : 22em;
}

.parent-box{
    display : flex;
    flex-direction : column;
    align-items : center;
}

.left {
  text-align:center;
}

.box {
    display: flex;
    align-items: center;
    width: 950px;
    background : black;
    color : white;
}

.box > * {
  margin : 1em;
}

<!-- language: lang-html -->

<div class="parent-box">
  <div class="box">
  <div class="left">
    <h3>lorem ipsum</h3>
     <p>
       Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm.When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately.
      </p>
      
    </div>
        
      <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
  </div>
               
</div>

<!-- end snippet -->

This should do the trick:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

body {
  background: black;
  color: white;
}

.box-outer {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 950px;
  margin: auto;
  margin-top: 30px;
}

.box-inner {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.box-inner__body {
  margin-right: 1em;
  text-align: center;
}

<!-- language: lang-html -->

<div class="box-outer">
  <div class="box-inner">
    <h3 class="box-inner__title">lorem ipsum</h3>
    <p class="box-inner__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
  <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
</div>

<!-- end snippet -->

You can simply wrap your text content in an additional div:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#box {
  display: flex;
  align-items: center;
  width: 950px;
  margin: auto;
  margin-top: 30px;
  text-align: center; /* center the inner text */
}

#box p {
  margin-right: 1em;
}

<!-- language: lang-html -->

<div id="box">
  <div>
    <h3>lorem ipsum</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>

  <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
</div>

<!-- end snippet -->