css style for display inline - html

Question

I want to display a <h1> tag and button tag in same line, but the button appear slightly below. I marked In green where I want to display it:
h1{
display:inline-block;
}
.log {
width:60%;
height: 30%;
position: absolute;
border: 1px solid #f9f2f2;
border-radius: 10px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 0px solid #f9f2f2;
text-align: center;
line-height:20px;
border-width: 0px 0px 1px 1px;
}
<div class="log">
<h1>Profile</h1>
<form method="post">
<button class="logout" name="logout" >Logout</button>
</form>
</div>

Answer 1

I have just modified this:
form {
float: right;
display: inline-block;
margin-top: 20px;
}
h1 {
display: inline-block;
}
.log {
width: 60%;
height: 30%;
position: absolute;
border: 1px solid #f9f2f2;
border-radius: 10px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 0px solid #f9f2f2;
text-align: center;
line-height: 20px;
border-width: 0px 0px 1px 1px;
}
form {
float: right;
display: inline-block;
margin-top: 20px;
}
<div class="log">
<h1>Profile</h1>
<form method="post">
<button class="logout" name="logout">Logout</button>
</form>
</div>
<!--End of log div -->
or you can do it with:
form{
display:inline;
}

Answer 2

You have an inline for the <h1> tag, and now you can put the inline in your form tag as below:
<form method="post" style="display:inline">
<button class="logout" name="logout" >Logout</button>
</form>

Answer 3

h1{
display:inline-block;
}
.log {
width:60%;
height: 30%;
position: absolute;
border: 1px solid #f9f2f2;
border-radius: 10px;
background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
background: -o-linear-gradient(top, #e5e3e3, ffffff);
background-color: #e5e3e3;
border: 0px solid #f9f2f2;
text-align: center;
line-height:20px;
border-width: 0px 0px 1px 1px;
}
form{
display:inline-block;
float:right;
margin-top:20px;
}
<div class="log">
<h1>Profile</h1>
<form method="post">
<button class="logout" name="logout" >Logout</button>
</form>
</div>