stop child covering

HTML

<div class="parent">
    <div class="child">
        lorem ipsum doler sit amet
    </div>
    <p>
    text here
    </p>
</div>

CSS

.parent {
  position:relative; outline: green 3px solid;
  outline-offset: -3px;
background-color:pink;
pading:5px;
overflow:hidden;
}
.child {position:relative; top:23px; background-color:yellow;
display:inline;
}