After creating two tables using table,table-cell, I noticed that increasing padding on the first cell also results in an increase in padding on the second cell, and vice versa. How can this issue be resolved?
.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 my CSS code, when adjusting padding-top or padding-bottom on the first table cell heading, the second cell elements also reflect the same padding as seen in the first cell (and vice versa).