resizablediv inside d3

How can this divs become resizable when they are nodes in a d3 force-directed graph

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

CSS

.links polyline {
  stroke: #999;
  stroke-opacity: 0.6;
}

.node {
    position: absolute;
    border-color:black;
    border-style: solid;
    border-width: 1.5px;
    border-radius: 5px;
    padding: 5px;
}

.text {
    fill: black;
    font: 10px sans-serif;
    text-anchor: end;
}

JavaScript

//constants for the network visualisation
var height = window.innerHeight-20; //fullsize svg
var width = window.innerWidth-20;

var nodes = [
    {"id": "RootNode", "group": 0},
    {"id": "Node1", 
      "ip_adresses": [
        {"ip_adress": "aa.bbb.114.80/28"}
      ],
      "group": 1},
    {"id": "Node2", 
      "ip_adresses": [
        {"ip_adress": "aa.bbb.117.96/28"}
      ],
      "group": 1},
    {"id": "Node3",
      "ip_adresses": [
        {"ip_adress": "eeee:ffff:400:3001::7"},
        {"ip_adress": "eeee:ffff:400:3001::8"},
        {"ip_adress": "eeee:ffff:400:3001::9"},
        {"ip_adress": "eeee:ffff:400:3001::10"},
        {"ip_adress": "eeee:ffff:400:3001::11"},
        {"ip_adress": "eeee:ffff:400:3001::12"},
        {"ip_adress": "eeee:ffff:400:3001::13"},
        {"ip_adress": "eeee:ffff:400:3001::14"},
        {"ip_adress": "eeee:ffff:400:3001::15"},
        {"ip_adress": "eeee:ffff:400:3001::16"},
        {"ip_adress": "eeee:ffff:400:3001::17"}
      ],
      "group": 1},
    {"id": "Node4", 
      "ip_adresses": [
        {"ip_adress": "cc.dd38.151"}, 
        {"ip_adress": "cc.dd38.152"}
      ],
      "group": 1},
    {"id": "Node5", 
      "ip_adresses": [
        {"ip_adress": "aa.bbb.114.36"}, 
        {"ip_adress": "aa.bbb.114.37"}
      ],
      "group": 1}
  ];

var links = [
    {"source": "RootNode", "target": "Node1", "value": 140},
    {"source": "RootNode", "target": "Node2", "value": 140},
    {"source": "RootNode", "target": "Node3", "value": 140},
    {"source": "RootNode", "target": "Node4", "value": 140},
    {"source": "RootNode", "target": "Node5", "value": 140}
  ];

var color = d3.scaleOrdinal(d3.schemeCategory10);

//creating and configuring the d3 force-directed graph simulation
var simulation = d3.forceSimulation()
      .force("charge", d3.forceManyBody().strength(-2000))
      .force("center", d3.forceCenter(width / 2, height / 2))
      .force("link", d3.forceLink()
        .distance(function(d){return...