title: image and text in a single line in button via css without float
body: <p>I am trying to achieve the image and text in the same line effect in a button. For other tags like div and p, display: inline works pretty fine but it doesn't seem to work for button tag. Here is the fiddle: </p>
  
  <p><a href="https://jsfiddle.net/xfgjoo23/" rel="nofollow">https://jsfiddle.net/xfgjoo23/</a></p>
  
  <p>The code: </p>
  
  <pre><code>&lt;button&gt;
      &lt;span class="astext"&gt;
          Next
      &lt;/span&gt;&lt;img src="image/delete1.png" class="del" style="width:10px;height:10px"  /&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>And my css: </p>
  
  <pre><code> img.del {
      display: inline-block;
      cursor: pointer;
      margin-right: 74%;
      position: relative;
      }
  .astext {
      display: inline-block;
      text-align: left;
      margin-left: 10%;
  }
  button {
      width: 80px;
  }
  </code></pre>
  
  <p>Please note: I do want to use button tag and I know float: right will work but this is the last option because it looks pretty weird though ... </p>