title: How to make text labels stick next to an image in CSS?
body: <p>I have an image in a Bootstrap's modal that has text-labels surrounding it. Therefore the position of the text is crucial when I shrink the browser (it has to be responsively accurate)</p>
  
  <p>I could easily do this with an image where the text is also in the png like this but I don't like it.
  <img src="https://i.stack.imgur.com/AiRtK.png" alt="What I want to do"></p>
  
  <p>What I tried:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
  &lt;div class="container-fluid"&gt;
  &lt;img class="" src="img/panel/cutaway-drawing.png"&gt;
    &lt;span class="a"&gt;Open frame technology&lt;/span&gt;
    &lt;span class="b"&gt;Roxul rock wool&lt;/span&gt;
    &lt;span class="c"&gt;Camira fabric&lt;/span&gt;
    &lt;span class="d"&gt;Damped membrane technology&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.a {
    position: absolute;
    top: 55%;
  }
  .b {
    position: absolute;
    top: 25%;
  }
  .c {
    position: absolute;
    top: 55%;
    left: 70%;
  }
  .d {
    position: absolute;
    top: 25%;
    left: 70%;
  }
  </code></pre>
  
  <p>This should work fine except I have no idea why the absolute positions of <code>.a .b .c .d</code> takes <code>.modal-body</code> as the parent instead of <code>.container-fluid</code>.</p>