Inserting span via jquery leads to wrong layout

I have a paragraph as part of a radio input with some text as span. I want to use jquery to add another span element in between. A kind of summary of the text. When I insert it by hand and render the HTML it looks nice. However when I run the script the new span element is rendered to close to the radio input. The resulting DOM looks the same however.

enter image description here

Can someone explain to me why the layout is different and what I need to do to make them look the same?

Here is the code snipped to reproduce it:

(function( $ ) {
    'use strict';
    $(window).ready(function( ) {
        $('#second input').each(function() {
            const label = this.value.toUpperCase();
            $(`<span>${label}</span>`).insertAfter($(this));
      })
    });
})( jQuery );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <p>
        <input name="color" id="color_0" value="Green" type="radio">
        <span>GREEN</span>
        <span style="opacity:0.6">Item will be green.</span>
    </p>
</div>

<div id="second">
    <p>
        <input name="color" id="color_1" value="Green" type="radio">
        <span style="opacity:0.6">Item will be green.</span>
    </p>
</div>

Answer

This is because inline elements render the line breaks between them as spaces. If you remove the line breaks between <input> and <span> you will see that the space is gone.

To add the space programatically you can simply add a space inside the <span> content.

(function( $ ) {
    'use strict';
    $(window).ready(function( ) {
        $('#second input').each(function() {
            const label = this.value.toUpperCase();
            $(`<span> ${label}</span>`).insertAfter($(this));
      })
    });
})( jQuery );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <p>
        <input name="color" id="color_0" value="Green" type="radio"><span>GREEN</span>
        <span style="opacity:0.6">No space for me.</span>
    </p>
</div>

<div>
    <p>
        <input name="color" id="color_0" value="Green" type="radio">
        <span>GREEN</span>
        <span style="opacity:0.6">Item will be green.</span>
    </p>
</div>

<div id="second">
    <p>
        <input name="color" id="color_1" value="Green" type="radio">
        <span style="opacity:0.6">Item will be green.</span>
    </p>
</div>