html - How to Align div and span

Question

HTML

<div class="summury-text multi-line">
  <div class="left-text"><span>Speed</span></div>
  <div class="multi-line-item">
    <span class="right-text meter">
      <span style="width:60%">
        <span class="progress info"></span>
      </span>
      <span class="meter-text">UP 257,008 byte</span>
    </span>
    <div class="devider"></div>
    <span class="right-text meter">
      <span style="width:80%">
        <span class="progress warning"></span>
      </span>
      <span class="meter-text">DOWN 10,024,600 byte</span>
    </span>
  </div>
</div>

CSS

.summury-text{width:500px;margin:0 auto;}
.devider{height:10px;}
.summury-text span{display:table-cell;}
.summury-text.multi-line{height:90px;}
.summury-text.multi-line .left-text{line-height:90px;}
.summury-text .multi-line-item{display:table-cell;height:40px;}
.summury-text .left-text{width:150px;background-color:#005fff;color:#fff;display:table-cell;line-height:90px;}
.summury-text .right-text{width:350px;}
.summury-text .right-text.meter{text-align:left;height: 40px;line-height:40px; position: relative;background: #f3efe6;overflow: hidden;}
.summury-text .right-text.meter span {display: block;height: 100%;}
.summury-text .right-text.meter span.meter-text{text-align:center;position:absolute;top:0;bottom:0;left:0;right:0;}

.progress {    
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode:both; 
    text-align:left;
}

.progress.danger {background-color:#dc3545}
.progress.success {background-color:#28a745}
.progress.info {background-color:#17a2b8}
.progress.primary {background-color:#007bff}
.progress.warning {background-color:#ffc107}


@-webkit-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-moz-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

I want to make check user network speed and display them. Left area set height:90px and right is also 90px .

I don't know why there is empty space like padding area. I changed div to span and span to div, but it didn't work.

the code is here https://jsfiddle.net/kooyh/4pu9xtrz/2/

please help align this.

Answer 1

Add vertical-align: top; to .summury-text .left-text

.summury-text .left-text {
    width: 150px;
    background-color: #005fff;
    color: #fff;
    display: table-cell;
    line-height: 40px;
    text-align: center;
    vertical-align: top;
}

https://jsfiddle.net/lalji1051/7xgp0fc2/1/