having trouble creating something simple... info panel of a person (HTML, CSS)

Issue

what i need is a picture on the left of the panel then a title on the top right with list of text underneath the title. seems quite simple but cant seem to achieve it with the size or layout going haywire...

the layout i would like: Panel Layout

using Visual Studio Code for both HTML and CSS

this is what i've just so far in HTML:

        <div class="role">
            <img id="role1" src="../images/owner.png" alt="Owner of Syndel">
            <div class="box">
                <ul>
                    <div class="picture">
                        <li><img src="../images/sinswordace150.png" alt="SinSwordAce's Profile Picture"></li>
                    </div>
                    <div class="title">
                        <li><h3>SinSwordAce</h3></li>
                    </div>
                    <div class="details">

                    </div>
                </ul>
            </div>
        </div>

.role {
    justify-content: center;
    margin-top: 20px;
    column-gap: 15px;
    row-gap: 15px;
}

.box {
    width: 900px;
    height: 300px;
    text-align: center;
    border-radius: 20px;
    justify-content: center;
    border: 7px solid rgba(169, 169, 169, 0.250);
    background: rgba(255, 255, 255, 0.050);
}

.picture {
    text-align: left;
    list-style-type: none;
}

.title {
    text-align: right;
    list-style-type: none;
}

Solution

What you could also do is to seperate your layout into divs and then using flexbox rearrange into your desired layout.

.role {
    justify-content: center;
    margin-top: 20px;
    column-gap: 15px;
    row-gap: 15px;
}

.box {
    width: 900px;
    height: 300px;
    display:flex;
    border-radius: 20px;
    justify-content: center;
    border: 7px solid rgba(169, 169, 169, 0.250);
    background: rgba(255, 255, 255, 0.050);
}

.left-side {
    height:100%;
    width:50%;
    background-color:red;
}

.right-side {
    height:100%;
    width:50%;
}
.title {
    background-color:green;
    height:20%;
    width:100%;
}
.title h3 {
  margin-top:0px;
}
.details {
    background-color:yellow;
    height:80%;
    width:100%;
}

<div class="role">
    <img id="role1" src="../images/owner.png" alt="Owner of Syndel">
    <div class="box">
            <div class="left-side">
                <img src="../images/sinswordace150.png" alt="SinSwordAce's Profile Picture">
            </div>
            <div class="right-side">
                  <div class="title">
                      <h3>SinSwordAce</h3>
                  </div>
                  <div class="details">

                  </div>
            </div>
    </div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answered By - Izanagi