how to set element in a specific position for all devices as responsive

Question

I have a web application that is going to become a app for smartphones . so it must be too Responsive . and now my question :

I have a parent div and 4 Child .I want to get down last one till it make a visual like below with parent's bottom border :

-----( content )-----

[This is the Result I got For an specific Resolution . I want it to be for all Resolution :

should I add 'height' to parent for this or not?

there is a simple code . how can I make it like image I Attached for all Resolutions ?

<style>
    #parent{
        border-bottom : 2px solid;
    }
    #child{
        pading:10px;
        border-radius:30px;
    }
</style>

and html like this :

<div id="parent">
    <span style="">
         Content
    </span>
</div>

Answer 1

Do it like this:

    .parent {
      position: relative;
      height: 200px;
      width: 100%;
    }

    .content {
      border: 2px solid tomato;
      padding: 10px;
      border-radius: 30px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: white
    }

    .line {
      width: 100%;
      position: absolute;
      border-bottom: 2px solid tomato;
      bottom: 20px;
    }

  <div class="parent">
    <div class="line"></div>
    <div class="content">
      Content
    </div>
  </div>