How to align text next to image inside of <details> tag

I am trying to align my text next to my image inside of the details tag in HTML, but when I try, it keeps putting it under the image instead of above.

The preferable end result is the image aligned on the right side of the image beside it.

N.B. i am trying to avoid the use of float to do the desired answer

relevant HTML/PHP code:

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@900&family=Overlock:ital,wght@1,900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Baskervville&family=MuseoModerno:wght@900&family=Overlock:ital,wght@1,900&display=swap');

    h1 {
      font-family: 'MuseoModerno', cursive;
      margin-left: 1em;
    }

    h2 {
      font-family: 'MuseoModerno', cursive;
    }

    p {
      font-family: 'Baskervville', serif;
    }

    span {
      font-family: 'Baskervville', serif;
    }

    .art1 {
      border: 5px solid black;
      margin: 2em;
      padding: 1em;
      box-shadow: 9px 10px 14px 9px rgba(0,0,0,0.58);
      -webkit-box-shadow: 9px 10px 14px 9px rgba(0,0,0,0.58);
      -moz-box-shadow: 9px 10px 14px 9px rgba(0,0,0,0.58);
    }

    img {
      width: 20em;
      display: inline-block;
      vertical-align: top;
    }

    span {
      font-weight: bold;
    }

    .wrap-around {
      padding-left: 20px;
      display: inline-block;
    }
<details class="art1" style="background-color: #FFA500;">
          <summary>Gluttony</summary>
          <h2>Gluttony</h2>
          <p>Written by: 1</p>
          <img src="https://i.stack.imgur.com/o5CFI.jpg" alt="Painting of gluttony.jpg personified">
          <p class="wrap-around">is an inordinate desire to consume more that which one requires. The punishment in hell is that you'll be force-fed rats, toads, and snakes. It is linked with the pig and the color orange.</p><br>
          <span>This article was last edited: Thursday, 27. January 2022.</span>
        </details>

>Solution :

Added a div for image and text and made it display flex. Hope this is what you’re looking for.

<details class="art1" style="background-color: #FFA500;">
          <summary>Gluttony</summary>
          <h2>Gluttony</h2>
          <p>Written by: 1</p>
          <div class="image-text">
          <img src="https://i.stack.imgur.com/o5CFI.jpg" alt="Painting of gluttony.jpg personified">
          <p class="wrap-around">is an inordinate desire to consume more that which one requires. The punishment in hell is that you'll be force-fed rats, toads, and snakes. It is linked with the pig and the color orange.</p><br>
      </div>
         <span>This article was last edited: Thursday, 27. January 2022.</span>
 </details>

.image-text{
display:flex;
}

Leave a Reply