HTML/CSS How to align these items horizontally?

Question

In my view I am trying to align the following horizontally (so there would be the checkbox then the bar and rest all on one line):

In my view:

 <div class="tableHomework2">
            <%= link_to homework do %>
              <div class="teachers linkable">
                    <%= check_box_tag "homework[id][]", homework.id, checked = false, class: "narrowtr" %>
                    <div class="progress-meter-interest-mobile horizTranslate" data-bar-length=" <%= homework.average_interest * 100 / 5 %>%"><%= homework.average_interest %></div>
                    <font size="1"><%= homework.significance.sig_option %></font>&emsp;&ensp;
                    <font size="1"><strong><%= formatted_date(homework.due)%></strong></font>
                </div>
                <% end %>
                <% end %>
                <% end %>

My Divs in CSS:

.teachers {
   border-bottom: 20px;
   background-color: white;
   top: 0px;
   margin:0px;  
   padding: 0px 2px 2px 3px;    
   border-width: 2px;
   border-bottom-width:1px;
   border-bottom-color:Grey;
   border-bottom-style: solid;
   width: 100%;
}

.linkable{
    color: black
}

.progress-meter-interest-mobile{
  background-color: #FFD733;
  width: 10px;
  height: 20px;
}

.progress-meter-interest-mobile.horizTranslate {
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
}

If I take out the CSS bar from the view it aligns vertically nicely. With the bar it appears as in the image. I'm wondering how can this be done with that div for the bar included? I tried setting max-width in that div but this did not work.

Any suggestions? Thanks.

RE: checkbox

Page source

<div class="show-for-small-only">
          <div class="tableHomework2">
            <a href="/homeworks/76">
              <div class="teachers linkable">
                    <input type="checkbox" name="homework[id][]" id="homework_id_" value="76" class="narrowtr" />
                    <div class="progress-meter-interest-mobile horizTranslate" data-bar-length=" 60%">3</div>
                    <font size="1">High</font>&emsp;&ensp;
                    <font size="1"><strong>25/11/2016</strong></font>
                </div>

Answer 1

can be implemented like this:

.teachers .progress-meter-interest-mobile, .teachers input[type="checkbox"]{
    display:inline-block;
    vertical-align:top
} 

Answer 2

I think what you're looking for is the display property. You can use it like:

.example {
  display: inline-block;
}