title: Can I position a button next to a pre?
body: <p>I have some HTML generated from a text editor macro. The output looks something like this:</p>
  
  <pre><code>&lt;div class='source-block'&gt;
  
    &lt;div class="src-container"&gt;
      &lt;pre class="src bash"&gt;sudo apt update&lt;/pre&gt;
    &lt;/div&gt;
  
    &lt;button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a&gt;copy&lt;/button&gt;
  
  &lt;/div&gt;
  
  </code></pre>
  
  <p>The only CSS I currently have applied to any of these elements so far is on the <code>pre</code>:</p>
  
  <pre><code>pre {
      padding: 8pt;
      overflow: auto;
      margin: 1.2em;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
  }
  
  pre.src {
      position: relative;
      overflow: auto;
      padding-top: 1.2em;
  }
  </code></pre>
  
  <p>I am trying to place my <code>copyBtn</code> directly to the right of the <code>&lt;pre&gt;</code>. Because of the way this text editor macro works, I cannot put the button <em>inside</em> the <code>src-container</code>, which is "automagically" generated. However, I can move the button before or after the <code>src-container</code> div.</p>
  
  <p>Can I achieve this with CSS? I've tried some stuff using <code>float</code> with <code>:last-child</code> and <code>z-index</code> but no success... Is this even possible given the macro limitation (i.e., I cannot easily place HTML inside this <code>src-container</code> class)?</p>
  
  <p>Thanks!</p>