I am currently working on a design that requires a perfectly aligned table using divs. Here is what I have done so far:
My goal is to have the time section placed on the left side of the entire row, while keeping the text right-aligned to avoid creating any spacing discrepancies. Here is an example of what I'm trying to achieve:
I have experimented with text-align: right;, direction: rtl, and adding more div elements, but unfortunately, nothing seems to be work as intended.
Here is the relevant HTML code:
<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>
Below is the relevant CSS code:
.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;
}