Help Getting Image Side by Side with Text

[hp2020]

I would like my image to be on the left, and the text to go in line, directly next to (on the right of) the photo. Help!

Currently looks like this:

I want it to look like this:

Here is my code for the page as it is currently configured:

<p class="p1">Model: Maria</p>
<p class="p1">Height: 5’4”</p>
<p class="p1">Normal Size Worn: XS/S</p>
<p class="p1">Weight: </p>
<p class="p1">Hips:</p>
<p class="p1">Bust:</p>
<div style="text-align: left;"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /> </div>

[Ninthony]

<style>
  .flex-container{
    display:flex;
  }
  .text-side {
    padding: 0 20px;
  }
</style>
<div class="flex-container">
  <div class="image-side"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /> </div>
  <div class="text-side">
    <p class="p1">Model: Maria</p>
    <p class="p1">Height: 5’4”</p>
    <p class="p1">Normal Size Worn: XS/S</p>
    <p class="p1">Weight: </p>
    <p class="p1">Hips:</p>
    <p class="p1">Bust:</p>
  </div>
</div>

Try that out.

[Wahab_Ahmad]

Hye @hp2020,

Place this code

<div style="display:inline-block"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /></div>

<div style="display:inline-block;padding:20px;">
<p class="p1">Model: Maria</p>
<p class="p1">Height: 5’4”</p>
<p class="p1">Normal Size Worn: XS/S</p>
<p class="p1">Weight: </p>
<p class="p1">Hips:</p>
<p class="p1">Bust:</p>
</div>

[hp2020]

Thank you! It is so close, but how do I get the first line Model Name: Maria to line up with the top of the photo now? 

[hp2020]

Thank you. Only problem is the photo not lining up with the text. any ideas? (see new photo below)

[Ninthony]

Can you share a url so we can take a closer look? 

[hp2020]

---

@Ninthony wrote:

Can you share a url so we can take a closer look? 

---

https://cocoandlily.com/products/test

[Wahab_Ahmad]

Share store password @hp2020 

[hp2020]

---

@Wahab_Ahmad wrote:

Share store password @hp2020 

---

No password, I removed it temporarily. 

[Ninthony · Accepted solution]

Use my same code but with another addition, just replace what you used previously with this:

<style>
  .flex-container{
    display:flex;
  }
.flex-container img {
margin: 0;
}
  .text-side {
    padding: 0 20px;
  }
</style>
<div class="flex-container">
  <div class="image-side"><img src="https://cdn.shopify.com/s/files/1/0304/2987/2261/files/Model_Headshot_Maria.jpg?v=1583934670" alt="" width="227" height="341" style="float: none;" /> </div>
  <div class="text-side">
    <p class="p1">Model: Maria</p>
    <p class="p1">Height: 5’4”</p>
    <p class="p1">Normal Size Worn: XS/S</p>
    <p class="p1">Weight: </p>
    <p class="p1">Hips:</p>
    <p class="p1">Bust:</p>
  </div>
</div>