JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

#container {
    height: 50px;
    width: 400px;
    border: 1px solid red;
}

JavaScript

var text = 'Foobar';
var textWidth = 50; //how to calculate this?
var plotWidth = 400;
var barWidth = plotWidth-textWidth;

var plot = d3.select(container)
            .insert("svg")
            .attr('width', plotWidth)
            .attr('height', 50);

plot.append("rect")
    .style("fill", "steelblue")
    .attr("x", 0)
    .attr("width", barWidth)
    .attr("y", 0)
    .attr("height", 50);

plot.append("text")
    .attr("x", barWidth)
    .attr("y", 28)
    .text(text)