How to change the <p> position inside the <div>?

Question

I got a tag

inside:

#in .css file
div.box {
    width: 50px;
    height: 30px;
}

#in .html file
<div class="box">
    <p>Here</p>
</div>

and looks like this:

------------
|          |
|   Here   |
|          |
------------

but I want to put <p>below <div>, for example:

------------
|          |
|          |
|   Here   |
------------

How?

Answer 1

add this

div.box {
    width: 50px;
    height: 30px;
    position:relative;
}
div.box p{
  margin:0;
  padding:0;
  position:absolute;
  bottom:0;
}