SOURCE

<div class='container'>
  <div class='content'>
    <div class="leftImage">
      <div class="glyphicon glyphicon-stats icon">
      </div>
    </div>
    <div class='inner'>
      <div contenteditable="true">
        点击修改
      </div>
      <div class="info-box-number kvalue">
        1,410
      </div>
      <div class="progress">
        <div class="progress-bar" style="width: 80%">
        </div>
      </div>
      <div class="progress-description">
        <span class="progress-value" />
        <span class="key-box" contenteditable="true">
          点击修改
        </span>
      </div>
    </div>
  </div>
  <div class='foot'>
   <div>
      同比增长
    </div>
    <div>
      20%
    </div>
  </div>
</div>
<div class='container'>
  <div class='content'>
    <div class='pannelino'>
        <div contenteditable="true">点击修改</div>
        <div class='innerInfo'>
          <div class="kvalue">1888888099999999999999999</div>
          <div class="extra">同比增长: 60% 
          </div>
        </div>
        <div class="progress">
        <div class="progress-bar" style="width: 80%">
        </div>
      </div>
    </div>
    <div class='Inner'>
      
    </div>
  </div>
  <div class='foot'>
    <div>
      同比增长
    </div>
    <div>
      20%
    </div>
  </div>
</div>
<div class='container'>
  <div class='content'>
    <div class='leftText'>
       <h3 class='kvalue'>150000000000000</h3>
       <p contenteditable="true" >点击修改</p>
    </div>
    <div class='rightIcon'>
      <div class="glyphicon glyphicon-stats">
      </div>
    </div>
  </div>
  <div class='foot'>
    <div>
      同比增长
    </div>
    <div>
      20%
    </div>
  </div>
</div>

.container {
  background-color: #FFFFFF;
  height: 115px;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 5px;
  padding: 0px;
  overflow: hidden;
}
body{
  background-color: #F5F5F5;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.inner {
  flex: 1;
}

.progress {
  height: 2px;
  margin-bottom: 5px;
}

.leftImage {
    width: 90px;
    height: 100%;
    font-size: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.2)
}

.foot {
  height: 27px;
  padding: 0px 15px;
  color: #FFFFFF;
  background-color: #123123;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.leftText{
  padding-left: 30px;
  flex: 1;
}
.rightIcon{
  position: absolute;
  right: 10px;
  font-size: 80px;
  width: 80px;
  margin-right: 10px;
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.15)
}
.pannelino{
  padding-left: 15px;
  flex: 1;
  flex-wrap:nowrap;
}
.kvalue{
  flex: 1;
  flex-shrink: 0;
  font-size: 18px;
}
.extra{
  /* display: none; */
  width: 120px;
}
.innerInfo{
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-wrap: wrap;
  font-size: 12px;
  align-items: flex-end;
}