div to take remaining space whose neighbor has transform translate - css

Question

I have two divs as shown in the image below:
In above image:
grey rectangle is the container div.
white rectangle is a div with transform: translateX(somevalue),
this rectangle is draggable. So, when dragging its translateX and translateY will be changed in the code.
blue rectangle is a div which should take up all the available width. Its height is fixed.
I don't have any code as I am trying to do this in react using react-draggable which uses translateX and translateY to drag an element.
I want a pure css solution because I don't want to re-render the component just for increasing the width of the div.
Note:
The blue rectangle is considered as div for the demo purpose only to make the example simpler to understand. In actual project the blue box will be a line and on that line I will put the distance between left edge of the container and left edge of the moving object. Something like a ruler.
Update:
Here is my code:
<div className="cover-print-area-settings-container">
<div style={{ background: 'black', height: 10, width: 'auto' }} />
<Draggable
bounds={{
left: 0,
top: 0,
right: 300,
bottom: 150
}}
>
<div id="cover-print-area-draggable-content" className="cover-print-area-settings-content">
<div className="contact-name">Contact Name</div>
<div className="side-by-side-start-center">
<PhoneIcon className="contact-detail-icon" />
<span>Mobile No</span>
</div>
<div className="side-by-side-start-center email-wrapper">
<EmailIcon className="contact-detail-icon" />
<span>Email</span>
</div>
<div className="side-by-side-start-center">
<LocationIcon className="contact-detail-icon contact-location-icon" />
<div className="contact-address-wrapper">
<p className="contact-address"> Address Line 1 </p>
<span className="contact-address-details"> Address Line 2 </span>
</div>
</div>
</div>
</Draggable>
</div>
Draggable element in the code is imported from react-draggable. Here is the documentation of react-draggable: https://github.com/mzabriskie/react-draggable
The css related to the above html looks like:
.cover-print-area-settings-container
height: 300px;
width: 600px;
overflow: auto
// height: 100%
background-color: #fff8dc
.cover-print-area-settings-content
border: 1px solid black
display: inline-block
vertical-align: top
.contact-name
font-size: 36px
text-align: left
.contact-detail-icon
margin-right: 7px
.contact-location-icon
padding-top: 12px
align-self: flex-start
.email-wrapper
margin-top: 5px;
margin-bottom: -8px;
.contact-address-wrapper
display: flex
flex-direction: column
justify-content: flex-start
.contact-address
text-align: left
align-self: flex-start
.contact-address-details
margin-top: -12px
text-align: left
align-self: flex-start

Answer 1

I would consider CSS variable in this case where you simply adjust the variable that will be used for the translate and the width:
.container {
padding:20px 0;
height:100px;
background:grey;
}
.blue {
height:100%;
background:blue;
display:inline-block;
width:var(--c);
margin-right:calc(var(--c) * -1);
}
.white {
height:100%;
width:100px;
background:white;
display:inline-block;
transform:translateX(var(--c));
}
<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>
Another idea would be to consider the blue part as a pseudo element of the white box and it will be easier to consider X/Y translation:
.container {
padding:20px 0;
height:100px;
background:grey;
overflow:hidden;
}
.white {
height:100%;
width:100px;
background:white;
display:inline-block;
transform:translateX(var(--c));
position:relative;
}
.white:before {
content:"";
position:absolute;
top:0;
left:-100vw;
right:100%;
bottom:0;
background:blue;
}
<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>