Calculate width and padding in bootstrap - css

Question

I'm trying to figure out how to dynamically calculate the width and padding-left within a custom div within a bootstrap "container-fluid".
The setup looks like this:
<div class="container-fluid">
<div class="row">
<!-- Text - Slider component -->
<div class="container-fluid">
<div class="row">
<div class="col-6 text"></div>
<div class="col-6 slider"></div>
</div>
</div>
<!-- Text - Slider component -->
<div class="container">
<div class="row">
<div class="col-12 text-to-line-up-with">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, totam.
</div>
</div>
</div>
</div>
</div>
Within the text-slider component I would like the col-6 "text" to lineup with the text asif it lives in the regular 'container'.
I understand that I need to use some sort of calc() for the padding-left and width, but I can't wrap my head around this.
Any help or suggestions are very much welcome!
Disclaimer, this is an old project, which is still using bootstrap 3, and I can't change the html structure.
I also made a codepen to give a better picture

Answer 1

You don't have to calculate the width. The solution can be much easier with simply adding linear-gradient to your container-fluid background.
The HTML code structrure looks like this:
<div class="container-fluid red-blue py-4">
<div class="row">
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
<div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
</div>
</div>
And the CSS:
.red-blue {
background: linear-gradient(to right, red 50%, blue 50%,blue 100%);
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
Hope this helps.