Use css to vertical align only some child divs below each other in parent div

Question

I Have a parent div 'site-branding' with 3 child divs inside it. The first element is an image with a logo, the second element the site title and the last element is the tagline. See HTML below:

<div class="site-branding">
    <div class="site-logo"><a href="somelogo.src"></a></div>
    <p class="site-title"><a href="example.com">Title</a></p>
    <p class="site-description">Some text here</p>
</div><!-- .site-branding -->

I want the logo to be in one column and then the title and tagline vertically aligned in column 2, something similar to this:

where left = logo, right top = title, right bottom = tagline. Now the caveat: I'm using a wordpress theme and subscription that limits how much i can customize - I cannot see or edit source files. So I CANNOT edit the html and wrap divs and containers etc nor can I add an javascript/jquery. It has to be done in CSS with the above HTML configuration.

EDIT: Ignore paragraph in right bottom block - the site tagline would just be a header as represented by the text "right bottom".

Cheers

Answer 1

This should do it:

.site-branding > .site-logo {
  display: inline-block;
  width = 50%;
  margin-left: 0px;
}