SOURCE

<h1>
  http://jsrun.net/37kKp/edit
</h1>
<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;
}