Make the text always be on top right of the box - html

Question

Goal:
The text "test" should always be at top right of the box
Problem:
What code am I missing in order to fulfill the goal?
Info:
*The text "test" always should be top right no matter what size of the id="length"
Thank you!
#length
{
width: 200px;
background-color: lightblue;
}
#asdf {
position: relative;
top: 5px;
left: 50px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
<div id="length">
<div id="asdf">
test
</div>
aa<br/>
bb<br/>
cc<br/>
dd<br/>
ee<br/>
ff<br/>
<br/>
</div>

Answer 1

Not sure if this is what u want to achieve, but you can check it:
#length
{
position: relative;
width: 200px;
background-color: lightblue;
}
#asdf {
position: absolute;
top: 0px;
right: 0px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
https://codepen.io/anon/pen/YOjKvR
Position relative to parent element and position absolute to "test" element

Answer 2

Your parent element should be relative so it becomes the new container for any absolutely positioned elements nested within. Remove height and width from #asdf to make it size to its contents.
#length
{
width: 200px;
background-color: lightblue;
position: relative
}
#asdf {
position: absolute;
top: 5px;
right: 5px;
border: 1px solid #73AD21;
}

Answer 3

Try to modify the css like this:
#length
{
width: 200px;
background-color: lightblue;
position: relative;
}
#asdf {
position: absolute;
top: 5px;
right: 0px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
You can add a "padding-top" to the #asdf if you want the "test" and "aa" strings in different lines.
Or another option:
#length {
width: 200px;
background-color: lightblue;
}
#asdf {
position: relative;
top: 5px;
width: 40px;
border: 1px solid #73AD21;
display: inline-block;
}
.right{
width: 100%;
text-align: right;
}
<div id="length">
<div class="right">
<div id="asdf">
test
</div>
</div>
aa<br>
bb<br>
cc<br>
dd<br>
ee<br>
ff<br>
<br>

Answer 4

If you put paragraph tags around your text, you'll have more control over how the text displays, as you can write css for the p tag.
The below snippet uses relative position, with negative margin top (of 5px)
#length {
width: 200px;
background-color: lightblue;
}
#asdf {
position: relative;
top:5px;
left: 50px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
div>p{
position:relative;
float:right;
margin-top:-5px;
}
<div id="length">
<div id="asdf">
<p>test</p>
</div>
aa
<br/> bb
<br/> cc
<br/> dd
<br/> ee
<br/> ff
<br/>
<br/>
</div>