JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

svg {
    background-color: #ff0;
}

line {
    stroke-width: 1px;
    stroke: #CCC;
}

JavaScript

var svg = d3.select("#test")
            .append("svg")
            .attr("width", 200)
            .attr("height", 300)
            .attr("class", "test-container");

var defs = d3.select('.test-container').append("svg:defs");

    defs.append("svg:clipPath")
    		.attr("fill", "#ccc")
        .attr("id", "textclip")
        .attr("transform", "translate(-10, -20)")
        .append("svg:rect")
        .attr("width", 300)
        .attr("height", 20)
        .attr("x", 0)
        .attr("y", 0)
        .attr("fill", "#ccc")
        .attr("clipPathUnits","objectBoundingBox");

    svg.append("g")
        .attr("class", "textgroup")
        .attr("transform", "translate(10, 100)")
        .attr("clip-path", "url(#textclip)")
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("fill", "#000")
        .text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.");

    svg.append("g")
        .attr("class", "textgroup")
        .attr("transform", "translate(10, 150)")
        .attr("clip-path", "url(#textclip)")
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("fill", "#000")
        .text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.");    
    svg.append('line')
        .attr("x1", 200)
        .attr("x2", 200)
        .attr("y1", 0)
        .attr("y2", 300);