请问下图中这种要怎么写css呢

问这么浅的问题很抱歉,就是下图这种要怎么写css呢,我的想法是用一个ul,里面两个li,然后第二个li里面再包含一个ul,然后这个ul里面再有两个li,可是css怎么都写不好,有朋友能帮个忙嘛,感谢

img

div 布局更简单 一些

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
        }

        .thumbs-up {
            width: 40px;
            height: 40px;
            border: 2px solid #8BD7E5;
        }

        .describe {
            margin: 0 12px;
            height: 40px;

        }

        .num {
            font-weight: 800;
            font-size: 16px;
        }

        .count {
            color: #B0B0B0;
            font-size: 13px;
            display: block;
            padding: 6px 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="thumbs-up"></div>
        <div class="describe">
            <span class="num">0</span>
            <span class="count">关注数(个)</span>
        </div>
    </div>
</body>

</html>

      <div style="display: flex">
        <img src="@/assets/logo.png" alt="">
        <div>
          <p>0</p>
          <p>关注人数(个)</p>
        </div>
      </div>

布局时先摸清结构

img


另外标签不建议乱用,列表一般使用ul,文本段落用p,标题用h1~6等等,让代码语义化更强