How can I get a w3-cell to not auto adjust? - html

Question

Working on a HTML page that requires me to have two elements side by side to replicate a 50/50 scenario sort of thing. I am using w3.css to help me since I am not so familiar with HTML/CSS.
My code is below for the section. So when the AWords/BWords grows too big, the cell grows so it does not match the other half. What I'm trying to ask is how can I implement a uniformly increase in size? So that both halves match each other, and the halfway mark stays in the middle of the screen?
<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
<div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
<div class="w3-container">
<p class="AWords w3-xxlarge"></p>
</div>
<div class="w3-container">
<p class="AVotes w3-large"></p>
</div>
</div>
<div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
<div class="w3-container">
<p class="BWords w3-xxlarge"></p>
</div>
<div class="w3-container">
<p class="BVotes w3-large"></p>
</div>
</div>
</div>
JSFiddle of what the code currently does

Answer 1

Assuming by the 'halfway' mark you mean the line that divides the two elements vertically, this arises due to the fact that W3 uses a table-based layout. Tables automatically expand to contain their contents.
As such, in order to ensure that both elements occupy the same amount of horizontal space, you simply give your cells a fixed width. This can be done by targeting .w3-cell:
.w3-cell {
width: 200px;
}
And can be seen in the following:
.w3-cell {
width: 200px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="Options w3-cell-row w3-center" style="width:75%;margin: 0 auto;">
<div class="OptionA w3-container w3-cell" style="background-color: #EA4D63;border-style: solid;border-top-left-radius:25px;border-bottom-left-radius: 25px;">
<div class="w3-container">
<p class="AWords w3-xxlarge">Idk what to do</p>
</div>
<div class="w3-container">
<p class="AVotes w3-large"></p>
</div>
</div>
<div class="OptionB w3-container w3-cell" style="background-color:#2BA9E5;border-style: solid;border-top-right-radius: 25px;border-bottom-right-radius: 25px;">
<div class="w3-container">
<p class="BWords w3-xxlarge">If this side gets too big it looks weird</p>
</div>
<div class="w3-container">
<p class="BVotes w3-large"></p>
</div>
</div>
</div>
I've also created a Fiddle showcasing this here.
Note that if you want to continue to use inline styles everywhere, you'll have to apply this to both <div> elements with this class.
Hope this helps :)