Как выровнять div в правом нижнем углу без использования абсолютной позиции?

Есть много постов о том, как выровнять по правому нижнему углу, но все они использовали абсолют, и я не могу этого сделать, потому что я не хочу, чтобы мои 2 элемента перекрывались, если один оказался слишком большим для размера окна.

Я попытался с помощью float, и он работает для выравнивания вправо, но не для выравнивания дна

<div style="border-bottom: 1px solid; padding-bottom:10px;">

    <h1 style="display:inline;">
      This is my big title - Bla bla bla   
    </h1>

    <div style="
            font-size: small;
            float: right;
            padding: 5px 0px 0px 20px;
            font-style: italic;
            display: inline;">
        Published on Friday 11th August 2017 at 12:46   
    </div>

    <div style="clear:both"></div>

</div>

Вы можете проверить результат в https://jsfiddle.net/j66q82gy/7/

Когда окно узкое, не имеет значения, что оно не выровнено снизу, но когда окно широкое, а h1 и средний div находятся на одной линии, становится очевидно, что оно не выровнено снизу, и мне нужно это быть выровненным снизу.

Мне также нужно держать их в одной строке, поэтому встроенные должны оставаться как в h1, так и в среднем div.

Изменить: Flex помещает вещи в своего рода неловко наполовину, наполовину блок, как это: i.imgur точка com / YA6TdBt.png

Мне нужно что-то похожее на это i.imgur dot com / Awj9Bht.png (верхнее изображение - мой код, нижнее - фотошоп, чтобы выглядеть так, как мне нужно).