CSS/HTML How to align these elements for a mobile view? - html

Question

I am trying to align the above elements in their divs evenly horizontally. In the above i'm trying to get 'high' and 'low' aligned so they are not up against the progress bar and are inline vertically. The checkboxes are fine but I used 'float:right' for the date - not ideal as this bumped it upward a little.
My html
<div class="show-for-small-only">
<div class="parents linkable">
<%= check_box_tag "homework[id][]", homework.id, checked = false, class: "narrowtr" %>
<%= link_to homeworks_engagement_view_item_path(:id => homework.id) do %>
<div class="progress-meter-interest-mobile horizTranslate linkable" data-bar-length="<%= homework.average_interest * 100 / 5 %>"><div class="text-center"><%= homework.average_interest %></div></div>
<font size="1" class="linkable mobile-center"><%= homework.significance.sig_option %></font>  
<font size="1" class="linkable mobile-right"><strong><%= formatted_date(homework.due)%></strong></font>
</div>
<% end %>
<% end %>
My CSS:
.parents {
border-bottom: 20px;
background-color: white;
top: 0px;
margin:0px;
height: 60px;
padding: 15px 2px 2px 3px;
border-width: 2px;
border-bottom-width:1px;
border-bottom-color:Grey;
border-bottom-style: solid;
width: 100%;
}
.linkable{
color: black;
}
Div for bar:
.progress-meter-interest-mobile{
background-color: #FFD733;
height: 20px;
display: inline-block;
}
Aligned date with float:right...
.mobile-right{
float:right;
margin-right: 2px;
}
.mobile-center{
display: inline-block;
text-align: center;
margin-right: 6px;
background-color: #EEE;
}
.horizTranslate is just css animation for the bars.
It's the two middle elements i'm really stuck on - the bar and "high" and "low". I have tried display:inline and display:inline-block and playing around with different divs but can't seem to get it.
Any ideas? Appreciate any guidance.

Answer 1

You should check CSS Flexbox. It solved my issues quite a few times.
Flexbox Doc The following should help in your case
.container {
align-items:stretch;
}

Answer 2

Since you look for a table like layout, stay with your inline block and give them a width (and a minor markup change, where I swapped the progress/text tags)
Note, the font element is deprecated so I replaced it with a span
.parents {
margin-bottom: 10px;
height: 40px;
padding: 15px 2px 2px 3px;
border-bottom: 1px solid Grey;
width: 240px;
}
.linkable {
color: black;
}
.progress-meter-interest-mobile {
background-color: #FFD733;
height: 20px;
text-align: center;
}
.parents.linkable > * {
display: inline-block;
vertical-align: middle;
}
.progress-meter-interest-mobile.low {
width: 30px;
}
.progress-meter-interest-mobile.high {
width: 60px;
}
.parents.linkable > :nth-child(2) {
width: calc(100% - 130px);
}
.parents.linkable > :nth-child(3) {
width: 30px;
font-size: 11px;
}
.parents.linkable > :nth-child(4) {
width: 60px;
text-align: right;
font-weight: bold;
font-size: 11px;
}
<div class="show-for-small-only">
<div class="parents linkable">
<input type="checkbox">
<div>
<div class="progress-meter-interest-mobile low">2</div>
</div>
<span class="linkable">Low</span>
<span class="linkable">12/12/2016</span>
</div>
<div class="parents linkable">
<input type="checkbox">
<div>
<div class="progress-meter-interest-mobile high">4</div>
</div>
<span class="linkable">High</span>
<span class="linkable">12/12/2016</span>
</div>
</div>
Of course you can use flexbox, as suggested, though you still need to swap the markup to make the "meter" work properly as well as give each element a width so they align vertically.
.parents {
margin-bottom: 10px;
height: 40px;
padding: 15px 2px 2px 3px;
border-bottom: 1px solid Grey;
width: 240px;
}
.linkable {
color: black;
}
.progress-meter-interest-mobile {
background-color: #FFD733;
height: 20px;
text-align: center;
}
.parents.linkable {
display: flex;
align-items: center;
}
.progress-meter-interest-mobile.low {
width: 30px;
}
.progress-meter-interest-mobile.high {
width: 60px;
}
.parents.linkable > :nth-child(2) {
width: calc(100% - 130px);
}
.parents.linkable > :nth-child(3) {
width: 30px;
font-size: 11px;
}
.parents.linkable > :nth-child(4) {
width: 60px;
text-align: right;
font-weight: bold;
font-size: 11px;
}
<div class="show-for-small-only">
<div class="parents linkable">
<input type="checkbox">
<div>
<div class="progress-meter-interest-mobile low">2</div>
</div>
<span class="linkable">Low</span>
<span class="linkable">12/12/2016</span>
</div>
<div class="parents linkable">
<input type="checkbox">
<div>
<div class="progress-meter-interest-mobile high">4</div>
</div>
<span class="linkable">High</span>
<span class="linkable">12/12/2016</span>
</div>
</div>