SOURCE

<div id="phone">
  <div id="note">
    <div id="text">
      <p>
        热销产品
      </p>
    </div>
    <div id="da"><p>公告<b>慧投添益8号66期</b></p></div>
    <div id="names">
      <div id="yi">
        <p>
          0.05%返期率
        </p>
      </div>
      <div id="er">
        <div>
        <p>
          5.2%</p>
          <p>预期年化</p>
          
      </div>
        <div >
          <p> 4个月</p><p>投资期限</p>
        </div>
    </div>
      <div>
        <p>
          王彤
        </p>
      </div>
      <div>
        <p>
          王彤
        </p>
      </div>
      <div>
        <p>
          王彤
        </p>
      </div>
      <div>
        <p>
          王彤
        </p>
      </div>
    </div>
  </div>
</div>

#phone {
  border: 2px solid red;
  width: 375px;
  height: 667px;
}

#names {
  display: flex;
  justify-content: space-around;
  font-size: 10px;
}

#text {
  margin-left: 15px;
  margin-right: 15px;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: grey;
  height: 30px;
  font-size: 20px;
}
#da{
  display: flex;
  justify-content: flex-start;
  font-size: 8px;
}
#yi{
  border: 2px solid grey;
  width: 70px;
  height: 100px;
}
#er{
  display: flex;
  justify-content:space-around;
  flex-direction:row;
  border: 2px solid grey;
  width: 180px;
  height: 100px;
  
}