JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
<div class="cost-square-wrap">
  <svg id="costSquareGraph" viewbox="0 0 1200 250"></svg> 
</div>

CSS

.cost-square-wrap {
    width: 100%;
}

svg {
    width: 100%;
    min-height: 250px;
}

JavaScript

w = 1200;
  h = 250;
  padding = 20;
  paddingYaxis = 50;



svg = d3.select('#costSquareGraph');
generateAxis();


  function generateAxis() {
    xScale = d3.scaleLinear()
                    .domain([0, 50])
                    .range([paddingYaxis, w - 8]);
    yScale = d3.scaleLinear()
                    .domain([0, 100])
                    .range([h - padding, 8]);

    xAxis = d3.axisBottom(xScale);
    yAxis = d3.axisLeft(yScale);

    svg.append('g')
            .attr('class', 'x-axis-group')
            .attr('transform', 'translate(0,' + (h - padding) + ')')
            .call(xAxis);
    svg.append('g')
            .attr('class', 'y-axis-group')
            .attr('transform', 'translate(' + paddingYaxis + ', 0)')
            .call(yAxis);             
  }