Vertical Align Header with Alert and Button - html

Question

I'm trying to vertically align a title header, an alert and two buttons.
My goal is to make the width of the alert bigger even if its content is short. My problem is that since I uses span for the alert, I need to put display: inline-block in its style but by doing that, the alignment with the header gets misaligned. BTW, I'm using Bootstrap.
Here's the image of what I want to happen:
Here's my HTML:
<h1>
<span>This will be a very long title</span>
<span class="alert custom">
This is notification!
</span>
<span class="pull-right">
<button class="btn button-round">O</button>
<button class="btn button-round">X</button>
</span>
</h1>
Here's my CSS:
.button-round {
border-radius: 50%;
color: white;
background: green;
}
.custom{
font-size: 12px;
vertical-align: middle;
background: green;
color: white;
}
Here's a jsfiddle of my current code:
JSFiddle of my current code

Answer 1

To make this easy, you should use flex :
.button-round {
border-radius: 50%;
color: white;
background: green;
margin: auto
}
.custom {
font-size: 12px;
vertical-align: middle;
background: green;
color: white;
/* added */
flex: 1;
margin: 0 0.25em;
}
h1 {
display: flex;
}
/* end added */
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<h1>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span>This will be a very long title</span>
<span class="alert custom">
This is notification!
</span>
<span class="pull-right">
<button class="btn button-round">O</button>
<button class="btn button-round">X</button>
</span>
</h1>
https://jsfiddle.net/fczbe58L/1/