title: any possible way to right align text next to an image in a Flexbox?
body: <p>I'm currently working on a project and I need to middle align the text next to the image to the right in the flexboxes. I have set up the parent and child classes to able to display the text but I will not move to the right side.</p>
  <p><a href="https://i.stack.imgur.com/O2HSK.png" rel="nofollow noreferrer">this is how it currently looks </a></p>
  <p><a href="https://i.stack.imgur.com/WBmWp.png" rel="nofollow noreferrer">this is how it's supposed to look</a></p>
  <p>here's the html and the CSS of the code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.thesis-main-container h1 {
    text-align: center;
    padding: 2rem;
  }
  
  .thesis-container {
    display: flex;
  }
  
  .thesis-main {
    justify-content: center;
    align-items: center;
    padding: 2rem;
    flex: 1;
  }
  
  .thesis-sidebar {
    flex: 0 0 40%;
    display: flex;
    flex: wrap;
  }
  
  .thesis-sidebar img {
    width: 35%;
    height: auto;
  }
  
  .img-box {
    width: 300px;
  }
  
  .img-box img {
    width: 100%;
    flex: 0 0 300px;
  }
  
  .info-box {
    padding: 1rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="thesis-main-container"&gt;
    &lt;h1.&gt;Thesis Exhibt&lt;/h1&gt;
      &lt;div class="thesis-container"&gt;
        &lt;!----Parent class--&gt;
  
        &lt;section class="thesis-main"&gt;
          &lt;!----Child class--&gt;
          &lt;video video controls autoplay loop width=100% src="assests/videos/thesis.mp4"&gt;&lt;/video&gt;
          &lt;h2&gt;Reimagine Urban&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum similique impedit iure.&lt;/p&gt;
        &lt;/section&gt;
  
        &lt;aside class="thesis-sidebar"&gt;
          &lt;!---parent class--&gt;
          &lt;div class="thesis-child"&gt;
            &lt;div class="img-box"&gt;
              &lt;img src="assests/images/thesis-fisma.jpg" alt=""&gt;
            &lt;/div&gt;
            &lt;div class="info-box"&gt;
              &lt;h3&gt;Fisma:Design and Prototype&lt;/h3&gt;
              &lt;p&gt;Design showcase of new prototype project&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="thesis-child"&gt;
              &lt;div class="img-box"&gt;
                &lt;img src="assests/images/thesis-fisma.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="info-box"&gt;
                &lt;h3&gt;Fisma:Design and Prototype&lt;/h3&gt;
                &lt;p&gt;Design showcase of new prototype project&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/aside&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>