html - how to make div with one line of text and div with two the same height? -


how can make boxes (box class) same height status in same line? text inside boxes need vertically aligned. need (don't worry arrows):

enter image description here

i need support ie10. have html , css this:

ul {    list-style: none;    padding: 0;    margin: 0;  }  ul li {    float: left;  }  .box {    white-space: pre;    text-align: center;    display: block;    border: 1px solid black;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    width: 200px;    padding: 10px 0;  }
<ul>    <li>      <span class="box">get parent  folder owner</span>      <span class="status">passed</span>    </li>    <li>      <span class="box">some text</span>      <span class="status">passed</span>    </li>    <li>      <span class="box">some text</span>      <span class="status">running</span>    </li>  </ul>

add 3 last properties:

.box {     white-space: pre;     text-align: center;     display: block;     border: 1px solid black;     -webkit-border-radius: 4px;     -moz-border-radius: 4px;     border-radius: 4px;     width: 200px;     padding: 9px 0;     /*add lines below:*/     display: table-cell;     height: 70px;     vertical-align: middle; } 

Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -