Position Text Opposite of Page Relative with Another Text Object - HTML, CSS - html

Question

I have got four text objects on a page, all of different length. I want one text object to be, for example, 'left: 2em;' (CSS). I want another text object to be positioned completely opposite the first text object (on other side of page).
I would like to position the text from the middle of the text not the end, so the distance between each text object and the closest edge is the same.
The problem can be seen in the following (low resolution) picture - Because the text is different length, it looks like the text is not positioned equally. Even if 'x' are the same and 'y' are the same.
The problem can also be seen here - The text looks like it is not evenly positioned. Even though the positioning code is:
right: 2em;
left: 2em;
right: 7em;
left: 7em;
It appears using 'right: ;' and 'left: ;' positions text from the end of the text. When you have different sized text, it looks like it is positioned unevenly. Maybe if you could position the text from the middle, it would look like it is evenly spaced.
Is there any other way?
Sorry if this seemed confusing.

Answer 1

Is it something like this?
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
.parent {
width: 100%;
position: relative;
}
.child-1 {
position: absolute;
top: 0;
left: 5em;
width: 100px;
height: 100px;
background-color: red;
}
.child-2 {
position: absolute;
top: 0;
right: 5em;
width: 100px;
height: 100px;
background-color: red;
}
There are plenty ways to make the elements be positioned oposite other one. Just add some code snippet to see where your problem is.