SOURCE

<div  id="phone">
  <div id="note"> 
    <div id="text">
    <p>生日提醒</p>
    </div>
    <div id="names">
      <div><p>王喆</p></div>
      <div><p>梦园</p></div>
      <div><p>毅博</p></div>
      <div><p>瑞云</p></div>
      <div><p>统华</p></div>
      <div><p>文仲</p></div>
    </div>
    </div>
  </div>
<div id="class1">
    <div id="l1">
     <p style="font-size:13px ;background-color:#ff6600;solid;
border-radius:30px;

">公募</p>
      &nbsp
      <p>慧投添益8号66期</p>
    </div>
      <div id="l2">
        <div id="s2">
      <p id="s3" >  0.05%  </p>
          <p  > 返拥率 </p>
        </div>
     <div id="l3">
          <div class="column">
    <span id="s3">5.2%</span>
    <span >4个月</span>
  </div>
       <div class="column">
    <span >预期年化</span>
    <span >投资期限</span>
  </div><div class="column">
    <span id="s3" >52%</span>
    <span >剩余8000万元</span>
  </div>
    </div>
        <div id="s1">
     <form action="">
<input type="button" value="预约" id="s3">
</form>
         <p  > 0.1万起投资 </p>
        </div>
    </div>
</div>

#phone
{
  border:2px solid red;
  width:375px;
  height:100px;
}
#names{
  display:flex;
  justify-content:space-around;
  font-size:12px;
}
#text{
  margin-left:15px;
  margin-right:15px;
  border-bottom-width:2px;
  border-bottom-style:solid;
  border-bottom-color:grey;
  height:30px;
  font-size:20px
}
#class1{
  
  border:2px solid yellowgreen;
  width:500px;
  height:280px;
}
#l1{

  display:flex;
  align-items:baseline;
}
#l2{
 
 
display: flex;
 justify-content:space-between;
}
#l3{
  display: flex;
 justify-content:space-between;
  flex-wrap: wrap;
}
.column {
  flex-basis: 80%;
  display: flex;
  justify-content: space-between;
}
#s3{
  display: flex;
align-items:  baseline;
  }
#s2{
  background-color:#c0c0c0;
  border-radius:20px;
  height:80px;
}
#s3{color:red;
}