I'm new to HTML/CSS and I want quite simple thing - 2 column layout, where the right column gets the width according to its content (text) and left column takes the rest of the space.

I was able to do that using `floats` - basically the right `div` was floated to the right and the left `div` was using some `overflow: auto` magic to get the remaining area: 

```css
body, html {
  margin: 0;
  height: 100%;
}

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

.right {
  float: right;
  width: auto;
  background-color: orange;
  height: 100%;
}

.left {
  background-color: black;
  width: auto;
  overflow: auto;
  height: 100%;
  color: white;
}
```

```html
<div class='right'>HELLO WORLD!!!</div>
<div class='left'>
  <div class="ellipsize">Lorizzle ipsum shiznit black amizzle, fo shizzle adipiscing tellivizzle. Nullizzle sapien velizzle, volutpat, suscipit bow wow wow, gravida i'm in the shizzle, stuff. We gonna chung i saw beyonces tizzles and my pizzle went crizzle tortizzle. Gangster erizzle. Brizzle izzle dolizzle my shizz turpizzle tempizzle fo shizzle. Maurizzle fo shizzle nibh shizzlin dizzle gangsta. Own yo' izzle yo mamma. Yo the bizzle rhoncus away. In black habitasse platea black. Phat dapibizzle. Curabitur tellizzle urna, pretizzle eu, mattizzle pot, break yo neck, yall vitae, nunc. Mammasay mammasa mamma oo sa suscipizzle. Shizznit sempizzle fizzle shiz yo.
  </div>
</div>
```

However, I have recently read a lot of posts about how `floats` are *wrong, old-style, should not be used* and so on, and everybody says to use `display: inline-block` instead.

**Question:** is it possible to reach the same effect with `inline-block` or without `floats`?