Text layout relative to div

Issue

I have a box and I want to type a h2 top of that box, which floated right. I want h1 to be in the middle of the box and top of that (I mean center of outside of the box).

Html

<h1>News</h1>
<div class="box"></div>

CSS

.box {
    width: 400px; 
    height: 200px; 
    background-color: red;
}

Solution

If you Google float you get this as the first hit and get an example how to use it: CSS Float property

.box {
width: 400px; 
height: 200px; 
background-color: red;

}

.txt-box > .box{
display: block;
}

.txt-box {
display: inline-block;
text-align: center;
}

h1 {
margin: 0;
}

h2 {
float: right;
}

<div class="txt-box" >
<h1>News</h1>
<div class="box">
<h2>Box text</h2>
</div>
</div>

Answered By - Filip Huhta