"Anchor" button inside an adjacent pre

Question

I'm working on styling for a coding blog I'm creating and I'm trying to get the copy buttons to work just right...

I want both copy buttons to align with the top of the pres, whether a label is provided or not. Would prefer if it were somehow anchored to the pre.

Better would be to move the copy buttons into the pres (via inline?). i.e., overlapping the upper-right corner of the pre. I do not care if it overlaps with text from the pre.

Limitation: I cannot move any HTML elements into or out of the "org-src-container" divs. I cannot move the label before (without writing additional lisp code, which I'd like to avoid). I can make any arbitrary changes before of after the "org-src-container" blocks. I'm looking for a CSS (or JS) solution given this HTML constraint.

If it's easier for styling, I can move the copy button before the "org-src-container", instead of after. Full disclosure, I'm using Org mode to publish .org markup files into HTML.

Below demonstrates my issue.

.source-block {
  display: flex;
  align-items: center;
  align-content: flex-start;
}

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;
  background: #0a0a0a;
  color: #fafafa;
}

.copyBtn {
  align-self: flex-start;
}

.org-src-container {
  width: 100%;
}

  <p>
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
  </p>

  <div class="source-block">
<div class="org-src-container">
  <label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
  <pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
</div>

<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>

  </div>

  <p>
Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label.  The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.
  </p>

  <div class="source-block">
<div class="org-src-container">
  <pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
</div>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>


  </div>

Answer 1

Here is a CSS only solution that will consider both cases (with or without label)

.source-block {
  display: grid;
  margin-top:0.5em;
}
.source-block .org-src-container,
.source-block button {
  grid-row:1;
  grid-column:1;
}
.source-block button {
  margin: 1.5em 1.5em auto auto;
  z-index: 1;
}
.source-block .org-src-container label {
  display:block;
  transform:translateY(-0.5em);
}
.source-block .org-src-container pre:not(:first-child) {
  margin-top:0;
}

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;
  background: #0a0a0a;
  color: #fafafa;
}

.copyBtn {
  align-self: flex-start;
}

.org-src-container {
  width: 100%;
}

<p>
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
  </p>

  <div class="source-block">
<div class="org-src-container">
  <label class="org-src-name"><span class="listing-number">Listing 1: </span>example_file.sh</label>
  <pre class="src src-sh">#!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
</pre>
</div>

<button class="copyBtn" name="btn_88a6f2445cdb4d8a8afe4717103f341f">copy</button>

  </div>

  <p>
Here is a source block meant to communicate commands to be run interactively. Thus, there is no filename and I am omitting the label.  The copy button is [approximately] aligned with the first row of the source block. This is nearly where I want it, except that it's not overlapping the pre.
  </p>

  <div class="source-block">
<div class="org-src-container">
  <pre class="src src-sh">echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
</pre>
</div>
<button class="copyBtn" name="btn_6b6c6f15f31f4a1cb9f8af9bcf6c5e7d">copy</button>


  </div>