Выровнять элементы без заполнения

Question

Я пытаюсь добиться идеально выровненной таблицы с помощью div. До сих пор это то, что у меня есть:

Я ищу, чтобы иметь раздел на левой стороне всей строки времени, но текст выровнен по правому краю, чтобы остановить создание космических различий, как так:

Я попытался с помощью text-align: right; и direction: rtl и играть примерно с более дивы, но ничего, кажется, работает до сих пор.

Соответствующий HTML:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="header"> 
      <h1>EVENTS SCHEDULE</h1> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-2"></div> 

     <div class="col-lg-8 date"> 
      <h4>Thursday, January 26th</h4> 
     </div> 

     <div class="col-lg-2"></div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-2"></div> 

     <div class="col-lg-8 event"> 
      <span class="event-time"> 1:00 PM</span> 

      <h5 class="event-title">Special Olympics Unified Snowboarding Final</h5> 
      <dd>SLOPESTYLE</dd> 
     </div> 

     <div class="col-lg-2"></div> 
    </div> 

Соответствующий CSS:

.date { 
    background: rgba(26, 26, 26, 1); 
    color: #fff; 
    padding-left: 20px; 
} 

.event { 
    color: #fff; 
    background: rgba(0, 0, 0, 0.4); 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.event-time { 
    font-size: 20px; 
    font-family: "Arial", Arial, sans-serif; 
    direction: rtl; 
} 

.event-title { 
    text-align: left; 
    line-height: .5em; 
    font-size: 20px; 
    font-family: "Arial", Arial, sans-serif; 
    display: inline-block; 
    padding-left: 80px; 
} 

.event dd { 
    display: block; 
    font-size: 12px; 
    font-family: "Verdana", Verdana, sans-serif; 
    padding-left: 150px; 
} 

Answer 1

Поскольку вы используете бутстраповских классы, Вы можете попробовать более низкие классы для вашего выравнивания, так как размер экрана, просматриваемые может не соответствовать большим.

заменить Col-LG-8 с Col-SM- или Col-MD- так что ваш HTML будет выглядеть

<div class="col-md-8 date"> 
     <h4>Thursday, January 26th</h4> 
    </div> 

    <div class="col-md-2"></div>