对齐不相关的 div

Question

http://codepen.io/anon/pen/Gxbfu <-- Here is the bits of the site I'm trying to align.

What I'm trying to achieve, is Onyx Design to align with the right side of the navbar, or navbar to scale to the end of "Onyx Design".

The text is not related to the navbar, unless uncle is a term used for div relations.

jQuery/JS IS an option, as I will have that on the site when I get to making it functional.

Here's what I want to make it look like http://puu.sh/5cq82.png

Divs that matter;

.titling contains the header, and has the border-top and border-bottom .bottomheader contains .navbar (the white strip with icons on) and the heart button.

Answer 1

I just used this piece of code:

h1
  max-width 300px
  width 300px
  text-align right

Might not be the best one, but suits your needs.

Fiddle: http://codepen.io/anon/pen/phAHc

Answer 2

If you dont know how long the navbar will be you can use some javascript (with jquery) to set the width:

$(function(){

   var h1 = $('.titling>h1');
   var navbar = $('.navbar');      
   h1.css({width: (navbar.width() + 'px'), 'text-align':'right'});  

});

Forked: http://codepen.io/anon/pen/jxrDF