Set same height and responsiveness for div only css

Question

I have two divs and they should be the same size. I tried to put a height it works in desktop size but when I use different platform it become a mess

 ____________
|  ___________                 
| |         | |
| |         | |  
| |         | |
|_|_________  |
  |___________|

 .custombox { text-align: center; padding: 10px; position: absolute; border: 1px solid; } .customparentbox { background: red } 

 <div class="customparentbox"> <div class="custombox"> <p>Sample text</p> <button>test</button> </div> </div> 

Answer 1

Here's my working jsFiddle .

You have to add height and width to your parent div element and also to the child div. I have added box-sizing in the style so that it will render the actual width and height of the element.

Add position:relative to the parent element.

 *{ box-sizing: border-box; margin: 0; padding: 0; } .customparentbox{ background: red; position: relative; height: 80px; width: 100px; } .custombox{ text-align: center; padding-top: 10px; position: absolute; border: 1px solid; left: 10px; top: 10px; height: 80px; width: 100px; background: #fff; } 

  <div class="customparentbox"> <div class="custombox"> <p>Sample text</p> <button>test</button> </div> </div> 

Answer 2

I've made some changes in your css

From

.custombox{
  text-align: center;
  padding: 10px;
  position: absolute;
  border: 1px solid;}
  .customparentbox{background:red}

To

.custombox {
  text-align: center;
  padding: 10px;
  position: relative;
  top:10px;
  left:10px;
  border: 1px solid;
}

.customparentbox {
  width:100px;
  background: red;
  border:1px solid green;
}

Here is a jsfiddle I made.