How to right align a div with display inline-block?

Question

I want the first div to align to the right, if I use float right it will bring the 2nd div on the same line which I don't want, my aim is to make the first div align to right without losing its block level as in chat applications. Any help will be greatly appreciated. . THANKS

Note: I am using display inline-block just because I want the divs to fit the content.

.outer{
  display: block; 
}

.lbubble , .rbubble {
    position: relative;
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px 0px #616161;
    box-shadow: 2px 2px 7px 0px #616161;
    display: inline-block;
    margin-bottom: 8px;
}

.lbubble{
    background: lightblue;
}

.rbubble{
    background: lightgreen;
}

.lbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -8px;
    border-style: solid;
    border-width: 10px 14px 10px 0;
    border-color: transparent lightblue;
    width: 0;
    z-index: 1;
}

.rbubble:after {
    content: "";
    position: absolute;
    top: 5px;
    right: -8px;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent lightgreen;
    width: 0;
    z-index: 1;
}

<div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div>
<div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div>

Answer 1

One solution is to use float: right and clear: right like:

.outer {
  display: block;
  clear: right;/*clear float right*/
}
.lbubble,
.rbubble {
  position: relative;
  padding: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 10px 0px #616161;
  box-shadow: 2px 2px 7px 0px #616161;
  display: inline-block;
  margin-bottom: 8px;
}
.lbubble {
  background: lightblue;
}
.rbubble {
  background: lightgreen;
  float: right;/*add float right*/
}
.lbubble:after {
  content: "";
  position: absolute;
  top: 5px;
  left: -8px;
  border-style: solid;
  border-width: 10px 14px 10px 0;
  border-color: transparent lightblue;
  width: 0;
  z-index: 1;
}
.rbubble:after {
  content: "";
  position: absolute;
  top: 5px;
  right: -8px;
  border-style: solid;
  border-width: 10px 0 10px 14px;
  border-color: transparent lightgreen;
  width: 0;
  z-index: 1;
}

<div class='outer'>
  <div class="rbubble">Right Bubble with align right</div>
</div>
<div class='outer'>
  <div class="lbubble">Left Bubble it should be on 2nd line with align left</div>
</div>

Using clear: right brings left bubble element to the desire position.