How to align div to bottom right without using absolute position?

Question

There's many posts on how to align to bottom right, but they all used absolute, and I can't do that because I don't want my 2 elements to overlap if one happens to be too big for the window size.

I tried with float, and it works to align right, but not to align bottom

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

You can check the result in https://jsfiddle.net/j66q82gy/7/

When the window is narrow, it doesn't matter that it's not aligned bottom, but when the window is wide and both h1 and the middle div are on the same line, it becomes apparent that it's not aligned bottom, and I need it to be aligned bottom.

I also need to keep them on the same line, so the inline should stay on both h1 and the middle div.

Edit: Flex puts thing in a sort of awkward half inline, half block like this: i.imgur dot com/YA6TdBt.png

I need something that looks like this i.imgur dot com/Awj9Bht.png (top image is my code, bottom image is photoshoped to look like what I need.)

Answer 1

With Flexbox you can align both at the bottom and keep the inner div right aligned.

Add display: flex; align-items: flex-end to the outer div, reset the margin on the h1 (or you can add one to the other inner div) and then set margin-left: auto; to the inner div

The align-items: flex-end will keep the inner div bottom aligned with the h1 and the margin-left: auto; will push the inner div to the right.

Note, because of the different font size, their inner metrics will create a somewhat bigger white space below the h1. Here I simply added a 4px bottom padding on the inner div, but you can also play with the overall line-height

---

Updated based on a comment

If to keep the text unwrapped until they hit their parents width, add flex-wrap: wrap; to outer div

<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my title
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla   
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

<br>
<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">

    <h1 style="margin: 0;">
      This is my big title - Bla bla bla bla bla bla bla bla bla
    </h1>
    
    <div style="
            margin-left: auto;
            font-size: small;
            padding: 0 0 4px 20px;
            font-style: italic;">
    	Published on Friday 11th August 2017 at 12:46 	
    </div>
		
</div>

Answer 2

You can use flexbox properties instead of float...

Completely updated answer

fiddle

.flex {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.flex div {
  margin-left: auto;
}

<div style="border-bottom: 1px solid; padding-bottom:10px;" class="flex">
  <h1>
    This is my big title - Bla bla bla
  </h1>
  <div style="
            font-size: small;
            padding: 5px 0px 0px 20px;
            font-style: italic;">
    Published on Friday 11th August 2017 at 12:46

  </div>
</div>