The center div will always fill the gap between the other 2. You could place an extra divs absolute positioned inside it. Here a sample with a bit more styling and a line at 50%;
<div style="display: flex; width: 500px; position: relative; padding-top: 20px; font-family: Arial;">
<div style="position: absolute; left: calc(50% - 1px); width: 2px; top: 15px; height: calc(100% - 15px); background:red;"></div>
<div style="position: absolute; left: calc(50% - 10px); width: 20px; font-size: 12px; top: 0; color: red;">50%</div>
<div style="background: blue; color: white; width: 53.73%; box-sizing: border-box; padding: 5px;"><b>53.73%</b></div>
<div style="background: grey; flex: 1;"></div>
<div style="background: green; color: white; text-align: right; width: 44.53%; box-sizing: border-box; padding: 5px;"><b>44.53%</b></div>
</div>