Can I position a button next to a pre? - html

Question

I have some HTML generated from a text editor macro. The output looks something like this:
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>
The only CSS I currently have applied to any of these elements so far is on the pre:
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;
}
I am trying to place my copyBtn directly to the right of the <pre>. Because of the way this text editor macro works, I cannot put the button inside the src-container, which is "automagically" generated. However, I can move the button before or after the src-container div.
Can I achieve this with CSS? I've tried some stuff using float with :last-child and z-index but no success... Is this even possible given the macro limitation (i.e., I cannot easily place HTML inside this src-container class)?
Thanks!

Answer 1

You can use flexbox to position the flow of the child element within the source-block (parent). You can use this to put them next to each other and position the vertical position with align-items: center;
More about flexbox here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Can I use Flexbox (browser support):
https://caniuse.com/#feat=flexbox
/* changed CSS */
.source-block {
display: flex;
align-items: center;
align-content:flex-start;
}
/* provided CSS*/
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;
}
/* misc styling */
.copyBtn {
margin-top: 2px;
}
<div class="source-block">
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>

Answer 2

Set all the class named src-container.
<style>
.src-container {
dispay:inline;
}
</style>
Or, set the single button.
button[name="******"] {
position: absolute;
}

Answer 3

Easiest solution: move the button before the .src-container and float it.
.copyBtn {
float: right;
}
Second solution: don't need to move the button, just position it absolutely, adjusting the top position to where you see fit. Only requirement is making sure the element that contains all these (typically the body) should have position set (usually so, but not always).
.copyBtn {
position: absolute;
top: 10px; right: 10px;
}
There are more advanced techniques, like auto aligning the button, but as your layout is clearly known, this should do enough for your purpose.

Answer 4

A simple solution would be to use float: left on the src-container to make the button go to the right of it. You could also use float:right on the copyBtn. These make the block elements go next to each other.
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;
}
.src-container {
float: left
}
<div class='source-block'>
<div class="src-container">
<pre class="src bash">sudo apt update</pre>
</div>
<button class='copyBtn' name=btn_e320edcae3214004ba6339711d50024a>copy</button>
</div>