dropcaps.js issue when first word is 2 letters

Question

I am using dropcaps.js to split the first letter of a sentence from the rest, and make it larger/dropcap. The code below is working perfectly, apart from when the first word of the sentence is just two letters. In this instance, the second letter (so not the dropcap letter) sits immediately next to the second word, regardless of wether or not a space (no matter how many) exist. Is there something is the below code that might be causing this?

// Jquery
// Isolate the first letter of relevent paragraphs and place within <span>
    $('p.has-drop-cap').each(function() {
        var text = $.trim($(this).html());
        var firstLetter = text.substr(0,1);
        $(this).html('<span class="initial-letter">' + firstLetter + '</span>' + '<span class="remaining-text">' + text.slice(1) + '</span>');
    }); 

    // Init dropcap.js and target <span>
    var dropcaps = document.querySelectorAll(".initial-letter");
    // Set dropcap number of rows to fit and baseline position
    window.Dropcap.layout(dropcaps, 5, 5);

// CSS  
// For first letter
.initial-letter {
    float: left;
    padding: 0px;
    font-size: 182px;
    line-height: 0px;
    margin-top: 6.3px;
    height: 127.4px;
}
// For second letter
p.has-drop-cap:first-letter {
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    text-transform: lowercase !important;
}

Answer 1

The issue has been isolated to .initial-letter using float: left to position itself correctly. This, for reasons I'm not 100% sure of, meant that if the first word within .remaining-text was <2 characters, then no space would be applied between those 2 letters and the following word.

I have discovered that applying display: flex to the parent p.has-drop-cap, resolves this issue, even without removing float: left on .initial-letter.