<div> padding auto increasing when using table-cell - html

Question

I created two tables using table,table-cell. But when I increase padding on first cell it also increasing padding on second cell also vice versa. What is the reason and how to solve it.
.desc-one{
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one{
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading{
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 5px;
}
.row-two-one{
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two{
display: table-cell;
padding-left: 20px;
}
.recent-heading{
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
In CSS code: If I increase padding-top / padding-bottom of my first table cell heading, the second cell elements also taking the padding mentioned in first cell (vice versa)

Answer 1

I have tried your code and found that only the first heading gets the padding top. Maybe you have another bit of code on your page somewhere that is adding this extra padding.
.desc-one {
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one {
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading {
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 100px;
}
.row-two-one {
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two {
display: table-cell;
padding-left: 20px;
}
.recent-heading {
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>

Answer 2

Your code works just fine, as the other answers say..
However, in one comment you remark that it works the way you describe if you remove the vertical-align:top from the style of the first cell.
Then why did you have this property in there in the first place? It confuses the matter to people who want to answer.
The answer is, if you don't specify any vertical-align property, it defaults to 'baseline`. That means that both cells align their contents to one another, on the bottom of the first line of text in each of them. That's simply how table cells behave; they work together.
The solution, therefore, is to put vertical-align:top in, which causes the cells to align their contents to their tops.