dropcaps.js проблема, когда первое слово состоит из 2 букв

Question

Я использую dropcaps.js, чтобы отделить первую букву предложения от остальных и сделать ее больше / dropcap.Приведенный ниже код работает отлично, кроме случаев, когда первое слово предложения состоит из двух букв.В этом случае вторая буква (а не буква буквицы) находится непосредственно рядом со вторым словом, независимо от того, существует ли пробел (независимо от того, сколько).Есть ли что-то ниже код, который может быть причиной этого?

// 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

Проблема была изолирована до .initial-letter с использованием float: left для правильного позиционирования. Это, по причинам, в которых я не уверен на 100%, означало, что если первое слово в пределах .remaining-text было <2 символа, то между этими двумя буквами и следующим словом не должно быть пробела. </p>

Я обнаружил, что применение display: flex к родителю p.has-drop-cap решает эту проблему, даже не удаляя float: left в .initial-letter.