SOURCE

<div id="phone">
  <div id="text">
    <div id="txt">公益</div>
    <div id="head">慧投添益8号66期</div>
  </div>
  <div id="line">
  <div id="return">
    <div id="box">
      <div id="percentage">0.05%</div>
      <div id="label">返佣率</div>
    </div> 
  </div>
  <div id="detail">
  <div id="firstline">
      <div id="color">5.2%</div>
      <div>4个月</div>
      </div>
      <div id="secondline">
      <div>预期年化</div>
      <div>投资期限</div>
      </div>
     <div id="second">
      <div id="color">52%</div>
      <div>800万</div>
      </div>
    </div>
  <div id="appointment">
      <div id="tx">预约</div>
      <div id="centag">0.1万起投</div>
  </div>
  </div>
</div>

#phone {
  border:2px solid red;
  width: 375px;
  height: 667px;
}
#text
{
  margin-left:2px;
  height:40px;
  font-size:20px;
  display: flex;
}
#txt
{
  margin-left:20px;
  height: 25px;
  width：50px；
  border: 1px solid;
  border-radius: 30px;
  background-color: red;
  color: white;
  display: flex;
}
#head
{
    margin-left:25px;
}
#line {
  display: flex;
  flex-direction: row;
}
#return {
  flex:1;
}
#box {
  height: 60px;
  width: 60px;
  border: 1px solid grey;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
#percentage {
  display: flex;
  flex: 6;
  justify-content: center;
  align-items: center;
  color:red;
}
#label {
  display: flex;
  flex: 4;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#detail {
  display: flex;
  flex-direction: column;
  flex: 2;
  justify-content: space-between;
  height: 66px;
}
#firstline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#secondline {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  justify-content: space-between;
}
#second {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#color
{
  color:red;
}
#appointment {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
#tx {
  margin-left:35px;
  height: 25px;
  width: 50px;
  border: 1px solid yellow;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:red;
}
#centag
{
  margin-left:25px;
}