Ellipsis On Fluid Widths

I have two divs inside a wrapper and i want to have the first div with max-width 65% and second div with max-width 35%, first is left aligned while second is right aligned, both on

Solution 1:

I suppose you could just use a left-floated DIV:

(Note that the max-widths are for demo purposes only... you can allow these to flow to 100% and it should still work.)

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outer {
  background-color: green;
  text-align: right;
}

.inner1 {
  max-width: 65%;
  float: left;
  background-color: red;
  text-align: left;
}

.inner2 {
  display: inline;
}

<divclass="truncate outer"style="max-width: 500px;"><divclass="truncate inner1">
    THIS IS IS SHORT TEXT
  </div><divclass="inner2">
    NOW THIS LINE COULD BE LONG
  </div></div>&nbsp;<divclass="truncate outer"style="max-width: 500px"><divclass="truncate inner1">
    NOW THIS LINE IS LONG AND GROW MORE CAUTIOUS?
  </div><divclass="inner2">
    NOW THIS LINE COULD BE LONG
  </div></div>