How can I move display inline-block to the right?

Question

I have a div that's within a display:inline-block. How do I move it to the right?

<div style='width:100%'>
left

<div style='display:inline-block;position:relative;right:0px'>
right
</div>

</div>

https://jsfiddle.net/foreyez/y5dt2prj/

Answer 1

You can use Flexbox instead and set margin-left: auto on inner div to move it to right.

<div style='display:flex;'>
  left
  <div style='margin-left: auto;'>
    right
  </div>
</div>

Answer 2

use float right. This should work for you:

<div style='display:inline-block;position:relative;float:right;'>
right
</div>