title: Place a picture next to my H1 text no matter what the width of the text is
body: <p>As you can see on the picture below, I placed an arrow image at the head on my H1 text.
  I did that by playing with margin right and top. It's working but the issue is that if I modify the H1 text then I would have to play with the margin right again.
  Is there a way to place the arrow at the end of the H1 text no matter what the width of the text is?
  Many thanks,</p>
  
  <p><img src="https://i.stack.imgur.com/N6A73.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="block"&gt;
      &lt;h1&gt;&lt;span&gt;H1 HEADER EN UIUIUIU MOTS&lt;/span&gt; KKJKJJKJJKJKJdJKJJK&lt;/h1&gt;&lt;img class="arrow" src="images/arrow-down.png" alt="arrow"&gt;
    &lt;/div&gt;
    &lt;div class="block clear fish shadow"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.block {
      display: block;
      clear: both;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;
      width: 980px;   
  }
  
  .arrow{
  margin-right: 290px;
  float: right;
  margin-top: -45px;
  
  }
  </code></pre>