centering a div containing left aligned text + another div - html

Question

I'm trying to:
center a container div which contains 2 inline elements: Another div, and a title.
The title can be any length.
The elements must be next to each other.
The text must be left aligned.
The div must be vertically aligned to the center of text.
This is the aim:
This is what I have so far.
HTML
<div class="container">
<div class="container">
<div class="box"></div>
<h2>This is my title</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
<div class="container">
<div class="box"></div>
<h2>This is another title. It could be any length. Any length at all.</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
</div>
CSS
.container{
width: 80%;
height: auto;
margin: 0 auto;
background-color: rgba(150,100,200,0.8);
text-align: center;
padding: 1em;
p{
text-align: left;
}
}
.box{
display: inline-block;
width: 3em;
height: 3em;
background-color: lightblue;
vertical-align: middle;
}
h2{
display: inline-block;
width: calc(100% - 4em);
margin: 0 auto;
text-align: left;
}
And here it is in a codepen
Help much appreciated.

Answer 1

Here is a solution with display: table.
Edit - Improved
Have a fiddle!
HTML
<div class="container">
<div class="heading">
<div class="box">
<div></div>
</div>
<h2>This is my title</h2>
</div>
<p>Content</p>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.box {
display: table-cell;
vertical-align: middle;
}
.box div {
width: 3em;
height: 3em;
background-color: lightblue;
}
h2 {
display: table-cell;
vertical-align: middle;
padding: 0 0 0 10px;
text-align: center;
max-width: 400px;
}
.heading {
display: table;
margin: 0 auto;
}
p {
text-align: center;
}

Answer 2

Like this?
http://codepen.io/anon/pen/pfbvH?editors=110
I created a class "title-box" and made the square and h2 inside table cells. The light blue square scales with the height of the header:
.title-box {
background-color: rgba(150,100,200,0.8);
margin: 0 auto;
padding: 1em;
display: table;
}
.box{
width: 3em;
height: 3em;
background-color: lightblue;
display: table-cell;
}
h2{
margin: 0 auto;
text-align: left;
display: table-cell;
padding: 10px;
}