How can I vertically align all the content including borders in the columns?

Question

Please see codepen for reference: http://codepen.io/rezasan/pen/apvMOR

I'm trying to make all the contents in the columns (Date, Title and Button even the separator to be vertically aligned. Tried display table but doesn't work. Require some assistance from the experts here.

HTML:

    <ul class="ir_home_news">                 
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
        </li>
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
        </li>
        <li class="si_fixed">
            <div class="ir_home_newsDate">18 November 2016</div>
            <div class="ir_home_newsTitle">Disclosure Of Interest</div>
            <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
        </li>
    </ul>

CSS:

    ul,li{
      margin:0;
      padding:0
    }

    li{
      list-style-type:none;
    }
    .ir_home_news li{
      border-top:1px solid #ebebeb;
      padding: 10px;
    }

    .ir_home_news li:nth-child(even){
      background-color: #f8f8f8;
    }

    .ir_home_news li::after {
        content: "";
        clear: both;
        display: table;
    }

    .ir_home_news li div{
      display: table-cell;
      vertical-align: middle;
      padding: 0px 15px;
      border-right: 1px solid red;
    }

    .ir_home_news li div:last-child{
      border-right: none;
    }

    .ir_home_newsDate {
      float: left;
      width: 18%;
      margin-bottom: 10px;
      font-size: 18px;
      color:#003087;
    }

    .ir_home_newsTitle{
      float: left;
      width: 65%;
      font-size: 17px;
      color:#003087;
    }

    .ir_home_button{
      float: left;
      width: 10%;
    }
    .ir_home_button button{

      background-color: #003087;
      color: #fff;
      padding: 15px 25px;
      border-radius: 0;
      font-size: 13px;
    }

  ul, li { margin: 0; padding: 0 } li { list-style-type: none; } .ir_home_news li { border-top: 1px solid #ebebeb; padding: 10px; } .ir_home_news li:nth-child(even) { background-color: #f8f8f8; } .ir_home_news li::after { content: ""; clear: both; display: table; } .ir_home_news li div { display: table-cell; vertical-align: middle; padding: 0px 15px; border-right: 1px solid red; } .ir_home_news li div:last-child { border-right: none; } .ir_home_newsDate { float: left; width: 18%; margin-bottom: 10px; font-size: 18px; color: #003087; } .ir_home_newsTitle { float: left; width: 65%; font-size: 17px; color: #003087; } .ir_home_button { float: left; width: 10%; } .ir_home_button button { background-color: #003087; color: #fff; padding: 15px 25px; border-radius: 0; font-size: 13px; } 

 <ul class="ir_home_news"> <li class="si_fixed"> <div class="ir_home_newsDate">18 November 2016</div> <div class="ir_home_newsTitle">Disclosure Of Interest</div> <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> </li> <li class="si_fixed"> <div class="ir_home_newsDate">18 November 2016</div> <div class="ir_home_newsTitle">Disclosure Of Interest</div> <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> </li> <li class="si_fixed"> <div class="ir_home_newsDate">18 November 2016</div> <div class="ir_home_newsTitle">Disclosure Of Interest</div> <div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div> </li> </ul> 

Answer 1

do not use floar: left inside your li, it will cause your vertical-align no worked,

 ul, li { margin: 0; padding: 0 } li { list-style-type: none; } .ir_home_news li { border-top: 1px solid #ebebeb; padding: 10px; } .ir_home_news li:nth-child(even) { background-color: #f8f8f8; } .ir_home_news li::after { content: ""; clear: both; display: table; } .ir_home_news li div { display: table-cell; vertical-align: middle; padding: 0px 15px; border-right: 1px solid red; } .ir_home_news li div:last-child { border-right: none; } .ir_home_newsDate { width: 18%; margin-bottom: 10px; font-size: 18px; color: #003087; } .ir_home_newsTitle { width: 65%; font-size: 17px; color: #003087; } .ir_home_button { width: 10%; } .ir_home_button button { background-color: #003087; color: #fff; padding: 15px 25px; border-radius: 0; font-size: 13px; } 

 <ul class="ir_home_news"> <li class="si_fixed"> <div class="ir_home_newsDate">18 November 2016</div> <div class="ir_home_newsTitle">Disclosure Of Interest</div> <div class="ir_home_button"> <a href=""> <button>VIEW DETAILS</button> </a> </div> </li> <li class="si_fixed"> <div class="ir_home_newsDate">18 November 2016</div> <div class="ir_home_newsTitle">Disclosure Of Interest</div> <div class="ir_home_button"> <a href=""> <button>VIEW DETAILS</button> </a> </div> </li> <li class="si_fixed"> <div class="ir_home_newsDate">18 November 2016</div> <div class="ir_home_newsTitle">Disclosure Of Interest</div> <div class="ir_home_button"> <a href=""> <button>VIEW DETAILS</button> </a> </div> </li> </ul> 

I just remove all float: left inside your li

.ir_home_newsDate {
    width: 18%;
    margin-bottom: 10px;
    font-size: 18px;
    color: #003087;
}

.ir_home_newsTitle {
    width: 65%;
    font-size: 17px;
    color: #003087;
}

.ir_home_button {
    width: 10%;
}