SOURCE

<div id="phone">
<div id="line">
  <div id="return">
    <div id="box">
      <div id="percentage">
        <p>0.05%</p>
      </div>
      <div id="label">
        返佣率
      </div>
    </div>
  </div>
  <div id="detail">
    <div id="firstline">
      <div>5.2%</div>
      <div>4个月</div>
    </div>
    <div id="secondline">
      <div>52%</div>
      <div>8200W</div>
    </div>
  </div>
  <div id="appointment"></div>
</div>
</div>

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

#line {
  display: flex;
  flex-direction: row;
}
#return, #appointment {
  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;
}
#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;
  flex-direction: row;
  justify-content: space-between;
}