Text alignment issue in a quote banner

Text alignment issue in a quote banner

as you can see on this JSFiddle and on picture below, I'm struggling to
get the signature placed as I want in my banner (I want it at the bottom
right of the blue banner without interfering with the quote text
alignment). The issue that I have is that with my current code the second
line of the text is not perfectly aligned horizontally to the middle of
the block (there's more space to the right than to the left). How could I
fix this and have full control on the signature position? Many thanks,

HTML:
<div class="block blueback center">
<h2 class="white">dfjdsjdklj dsjfdslfjldsjf ldsjfdlsjflkdsfjdlskjf
dljfdslfjkldsj dljfsdljfdklsj lkdjflkdsjdlks dsfjsdlkfjkls
dsjflkdsfjdkl</h2><p class="signature">John Dupont</p>
</div>
CSS:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
}
.white { color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
display: inline;
}
.center {
vertical-align: middle;
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
}
.signature {
display: inline;
margin-top: 20px;
margin-bottom: 0px;
padding-top: 0px;
font-size: 12px;
color: #fff;
float: right;
font-weight: 700;
}
.blueback {
background: #0064C4;
}