How to adjust width of svg element 'rect' according to a text sibling element?

Question

I have an svg element rect within The same also contains a text element. I am using the translate function to show as if the text is inside the rect element. I want to change the width of rectangle accordingly to the width of text.

How do I achieve this in svg in d3? Any help is highly appreciated.

nodeEnter.filter(function(d: any) { return d.type != 'node--button'})
                  .append("rect")
                  .attr("rx", "15")
                  .attr("ry", "20")
                  .attr("x", "-100")
                  .attr("y", "-20")
                  .attr("width", "200")
                  .attr("height", "40")
                  .style("fill", function(d: any) { return d._children ? "lightsteelblue" : "#fff"; })
                  .on("click", this.click);

nodeEnter.filter(function(d: any) { return d.type != 'node--button'})
                  .append("text")
                  .attr("x", "-60")
                  .attr("y", "-10")
                  .attr("dy", ".35em")
                  .attr("text-anchor", function(d: any) { return d.children || d._children ? "center" : "center"; })
                  .text(function(d: any) { return d.name; })
                  .style("fill-opacity", 1e-6);