basic

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
    }
    svg {
      border: 1px solid pink;
      margin: 10px;
      display: flex;
      background: lightblue;
      border: 1px dashed cornflowerblue;
    }
    div {
      border: 1px solid blue;
      margin: 10px;
/*       display: flex;       */
    }
    #cardContainer {
      color: blue;
      padding: 5px;
      background: lightgray;
    }
    .compType {
      background: pink;
      padding: 5px;
    }
     .svgText {
      background: none;
      padding: 0px;
      font-size: 26px;
      font-family: monospace;
    }
    
  </style>
</head>

<body>
  <div id="cardContainer">container</div>
  
  <script>
    let holder = d3.select("#cardContainer")
 
    holder.append("div")
    	.attr("class", "compType")
      .attr("width", 200)
    	.attr("height", 300)
    	.text("compTon")
    	
    let svg = holder.append("svg")
      .attr("width", 300)
      .attr("height", 80)

svg.append("g")
    	.attr("class", "svgText")
	    .append("text")
      .text("append to svg")
      .attr("y", 30)
      .attr("x", 20)

</script>
</body>

https://d3js.org/d3.v4.min.js