怎么弄才可以设置成概述页在右边耳机型号在左边

怎么设置成图2那个样子
这是我写的代码

嘶，首先你这个写的结构看着好别扭，，，我直接放代码吧

    <div class="body">
        <ul class="title">
            <li>
                <h2>XXXXXXXXXX XXXXXXXXXX</h2> |
                <p>Redmi XXXX3</p>
            </li>
            <li>
                <a href="#">XXX</a> |
                <a href="#">XXX</a> |
                <a href="#">XXX</a> |
                <a href="#">XXX</a> |
                <a href="#">XXX</a> |
                <a href="#">XXX</a> |
            </li>
        </ul>
    </div>
    <div>
        <img src="xiaomi/XXXXXXXXXXXXXXXXXX" alt="">
    </div>

    .body {
        box-shadow: 20px 20px 60px #bebebe,
            -20px -20px 60px #ffffff;
    }

    .title {
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .title>li:nth-of-type(1) {
        display: flex;
        align-items: center;
    }

给div加个宽度

使用left+position，比如

.header-left{
  position:absolute;
  left:0px;
}