How do I make two divs in the same "row" float in different directions?

Question

Here is a JSFiddle of what I have so far:

JSFiddle Link

html

<div class="results">
   <h2>Some data</h2>
   <ul style="margin:0;padding:0;">
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">       text   </div>
         <div class="histogramBar">   </div>
         <div class="resultDiv">      &nbsp;7   </div>
      </li>
      <br>
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">       text   </div>
         <div class="histogramBar">   </div>
         <div class="resultDiv">      &nbsp;1   </div>
      </li>
      <br>
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">       text   </div>
         <div class="histogramBar">   </div>
         <div class="resultDiv">      &nbsp;4   </div>
      </li>
      <br>
      <li class="resultsListItem" style="list-style-type: none;">
         <div class="answerDiv">       text   </div>
         <div class="histogramBar">   </div>
         <div class="resultDiv">      &nbsp;4   </div>
      </li>
      <br>
   </ul>
</div>

css

.answerDiv, .resultDiv, .histogramBar {
  display: inline-block;
}

.answerDiv, .histogramBar {
  float: left;
}

.answerDiv {
  margin-right: 10px;
  width: 100px;
}

.histogramBar {
  height: 6px;
  width: 100px;
  background-color: #66dd66;
  margin-top: 9px;
  border-radius: 5px;
  transition: width 1s;
}
.histogramBar:hover {
  width: 150px;
}

/*text*/
h2 {
  font-size: 40px;
  color: black;
}

/*alignment*/
.results {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

I'm having some trouble, however, getting all the alignment stuff right. My goal is to have the text inside the .answerDiv's all float left. If the text was longer, at a certain point it would wrap to a second line. Then, the histogramBar would also float left and sit just to the right of the text. Then, the results number would float right to the opposite side of the containing div. Additionally, I can't figure out how to make the number on the right stay still when the histogramBar's width changes.

Unfortunately, I cannot figure out how to get this to work properly. I'm relatively new to styling so I'm well aware that my code might be really ugly.

How do I accomplish this?

Recap - text floats left, histogram bar floats left (just right of text) numbers float right. when you hover over the bar and it's size changes, the number on the right should not be affected.

Answer 1

For the text to be right-aligned, in you configuration positioning it absolutely based on <li> is the easiest way:

.resultDiv {
    text-align: right;
    position: absolute;
    right: 0;
}

For that to work, you have to add position: relative; to your .resultsListItems.

I changed your example a bit with regard to styling to showcase the elements better.

.answerDiv,
.resultDiv,
.histogramBar {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}
.answerDiv {
  margin-right: 10px;
  width: 100px;
}
.histogramBar {
  height: 6px;
  width: 100px;
  background-color: red;
  margin-top: 9px;
  border-radius: 5px;
  transition: all 1s;
}
.histogramBar:hover {
  width: 150px;
}
/*text*/

h2 {
  font-size: 40px;
  color: black;
}
/*alignment*/

.results {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0;
}
.resultsListItem {
  list-style-type: none;
  position: relative;
}
.resultsListItem:nth-of-type(even) {
  background-color: #f8f8ff;
}
.results ul {
  margin: 0;
  padding: 0;
}
.resultDiv {
  text-align: right;
  position: absolute;
  right: 0;
}

<div class="results">
  <h2>Some data</h2>
  <ul style="">
    <li class="resultsListItem">
      <div class="answerDiv">text</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">7</div>
    </li>
    <li class="resultsListItem">
      <div class="answerDiv">text that will wrap to a new line</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">821</div>
    </li>
    <li class="resultsListItem">
      <div class="answerDiv">text</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">4</div>
    </li>
    <li class="resultsListItem">
      <div class="answerDiv">text</div>
      <div class="histogramBar"></div>
      <div class="resultDiv">14</div>
    </li>
  </ul>
</div>