SOURCE

<div id="phone">
   <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>5.2%</div>
      <div>4个月</div>
      </div>
      <div id="secondline">
      <div>52%</div>
      <div>8oowan</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;
}