Imagine a scenario where two texts are placed in two divs with equal widths. The text on the left needs to be left-aligned, while the text on the right needs to be center-aligned. However, due to this alignment, the spacing between the left edge and the left text ends up being smaller than the spacing between the right edge and the right text. How can we ensure equal spacing on both sides?
Check out this image to see the situation
Here's the CSS code:
.ll {
position: relative;
left:0px;
background-color: brown;
}
.rr {
position: relative;
left:10px;
background-color: green;
float: right;
}
.left {
background-color: red;
color: #ffffff;
padding: 15%;
font-size: 20px;
height: 100%;
}
.right {
background-color: blue;
color: white;
text-align: center;
padding: 15%;
font-size: 20px;
height: 100%;
}
.outside {
border: 1px solid black;
}
And here's the HTML code:
<div class="container outside" >
<div class="row">
<div class="col-6">
<div class="left">
<div class="ll">
<p>This is the LEFT text. <br> This is the LEFT text. <br> This is the LEFT text. <br> This is the LEFT text</p>
</div>
</div>
</div>
<div class="col-6">
<div class="right">
<div class="rr">
<p>This is the RIGHT text. <br> This is the RIGHT text. <br> This is the RIGHT text. <br>This is the RIGHT text. <br>
This is the RIGHT text. <br> This is the RIGHT text. <br> This is the RIGHT text. <br>This is the RIGHT text. <br>
This is the RIGHT text.
</p>
</div>
</div>
</div>
</div>
</div>
For a live example, check out this JSFiddle link