title: How should I align one element to the right and one element to the left inside a containing element?
body: <p>This is very common case for me:</p>
  
  <pre><code>&lt;div&gt;
   &lt;p&gt;Left aligned element&lt;/p&gt;
   &lt;img title="right aligned element" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know three ways to solve this either</p>
  
  <pre><code>div{
    width: 100px;
  }
  p{
    display: inline-block;
    width: 70px
  }
  img{
    display: inline-block;
    width: 30px
  }
  </code></pre>
  
  <p>As the size of the containers perfectly match the containing block, the right content will align with the right edge.</p>
  
  <p><strong>Con:</strong>
  My experience(don't know why) is that the pixel count differs from browser to browser. This makes the content drop down to the next row in some browsers.</p>
  
  <pre><code>div{
    height: 100px
  }    
  p{
  
    float: left;
  }
  img{
    float: right;
  }
  </code></pre>
  
  <p><strong>Con:</strong> The problem with this one is that I want the containing elements height to be set by the height of the p or img, whichever is taller. With the float they get <code>height: 0</code></p>
  
  <pre><code>div{
    display: relative;
  }
  p{
    width: 70px;
  }
  img{
    display: aboslute;
    right: 0
  }
  </code></pre>
  
  <p><strong>Con:</strong> Thisone is reliant on the height of the left element, also It is more work to update get it to work on mobile devices. (typically, the contents like this tend to be placed on top of each other)</p>
  
  <p>What approach do you use? Is there a better way?</p>