how can I align the button and the text inline - html

Question

I want to align the button and the text in the same line.
<div class="oferts">
<div class="container" style="line-height: 300px; text-align: center;">
<h1>Bucura-te de ofertele noastre alaturi de familia ta <button class="oferts-button">Vezi toate beneficiile terapiilor</button>
</div>
</div>
button {
background: transparent;
color: #666;
border: 1px solid #d4d4d4;
padding: 10px 20px;
margin: 0 10px 0 10px;
transition: border .3s ease-in;
}
button:hover {
border: 1px solid #909090;
padding: 10px 20px 10px 20px;
}
button a {
font-family: 'Raleway', sans-serif;
color: #666;
font-size: 14px;
}
.oferts-button a {
font-family: 'Raleway', sans-serif;
color: #fff;
}
.oferts-button:hover {
border: 1px solid #fff;
}
.oferts {
width: 100%;
display: table;
height: 300px;
background:url(../img/back.jpg) center no-repeat;
}

Answer 1

You can use the vertical-align css property on both elements:
container {
line-height: 300px;
text-align: center;
}
container > h1,
container > h1 a {
vertical-align: middle;
}

Answer 2

DEMO
HTML Removed h1 tags, as was not ending and didn't even found in css
NOTE: Used font-size - 32px because h1 tag = 32px
<div class="oferts">
<div class="container">
Bucura-te de ofertele noastre alaturi de familia ta
<button class="oferts-button">
Vezi toate beneficiile terapiilor
</button>
</div>
</div>
CSS Add this class to your CSS
.container
{
line-height: 300px;
text-align: center;
font-weight:bold;
font-size:32px;
}