Avoid line break when using span tag

Question

I've created an HTML script that allows the user to update keywords in a block of text, then copy that text to their clipboard. The text should display like this:

{
  "key1":"value1",
  "key2":"value2",
  "key3":"value3"
}

But because of the "span" tags, the formatting is completely off (run the code below to see what I mean). I believe span is adding a line break before and after the text it is covering.

Here is my code:

<p>Enter value 1</p>
<input type="text" id="myText1" value="1st value">
<br>
<p>Enter value 2</p>
<input type="text" id="myText2" value="2nd value">
<br>
<button onclick="myFunction()">Update text block</button>
<br>
<br>
<pre style="color: #000; background: #cccccc; padding:10px; display: inline-flex" id="TextToCopy">
{
  "key1":"<span id="var1">value1</span>",
  "key2":"<span id="var2">value2</span>",
  "key3":"value3"
}</pre>
<button style="display: grid" onclick="copyToClipboard()">Click to Copy</button>

<script>
function myFunction() {
  var x = document.getElementById("myText1").value;
  document.getElementById("var1").innerHTML = x;
  var y = document.getElementById("myText2").value;
  document.getElementById("var2").innerHTML = y;
}
</script>

 <script>
function copyToClipboard() {
  var copyText = document.getElementById("TextToCopy");
  navigator.clipboard.writeText(copyText.innerText);
}
</script> 

Any help would be greatly appreciated! Thank you

Answer 1

You need to remove display: inline-flex; property, and it should work:

<pre style="color: #000; background: #cccccc; padding:10px;" id="TextToCopy">
{
  "key1":"<span id="var1">value1</span>",
  "key2":"<span id="var2">value2</span>",
  "key3":"value3"
}</pre>