ul li 列表寫法用途真的很廣泛，能呈現的方式也非常多。
想要呈現的方式如下：

HTML 程式碼如下

   <div class="prefer-content">
                            <h2>每天新推薦</h2>
                            <div class="play-line"></div>
                            <ul class="wrap">
                                <li>

                                    <div class="wrap-left">
                                        <img src="https://images.unsplash.com/photo-1489724309061-9b8af05f95e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                                            alt="">
                                    </div>
                                    
                                    <div class="wrap-right">
                                        <h3>
                                            因為你聽過鐵肺人生
                                        </h3>
                                        <p>他就圖象圖像化銀行稱為臺灣法律，反正都不玻璃東方水果，結束女朋友三年，運行平台一定要二十。
                                        </p>

                                    </div>
                                </li>

在 li 在左邊與右邊！

SCSS 如下呈現

.prefer-content {
    margin-top: 1em;

    .wrap {
        margin-top: 1em;
    }

    li {
        width: 31.33333%;
        margin-right: 1%;
        margin-left: 1%;
        float: left;

        .wrap-left {
            float: left;
            max-width: 50%;
            height: 200px;
            margin-right: 10px;
左邊的設定
            img {
                max-width: 100%;
                height: auto;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
            }
            圖片這樣的設定滿好用的，而且很常用
        }

        .wrap-right {
            padding: 5px;

            h3 {
                font-size: 14px;
                color: #333;
                font-weight: bold;
                text-align: left;
                margin-bottom: 10px;
            }
右邊的設定
        }
    }
}

這次內容沒有寫得太特別，附上 Codepen
https://codepen.io/hnzxewqw/pen/OJLrxqR