JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="XAxis" class="left" ></div>
<div id="YAxis" class="left" ></div>
<div id="XYAxis" class="right" ></div>

CSS

div form p.left {
    float: left;
    clear: both;
}

div form p.right {
    float: right;
    clear: both;
}

JavaScript

var d3 = Plotly.d3;
var gd3 = d3.select("div[id='XAxis']");
var my_XAxis = gd3.node();
gd3 = d3.select("div[id='YAxis']");
var my_YAxis = gd3.node();
gd3 = d3.select("div[id='XYAxis']");
var my_XYAxis = gd3.node();

var layout = {
	xaxis: {
		range : [0, 1]
	},
	yaxis: {
		range : [0, 1]
	},
	margin: {t: 20},
	hovermode: 'closest',
}

Plotly.newPlot(my_XAxis, [], layout);
Plotly.newPlot(my_YAxis, [], layout);
Plotly.newPlot(my_XYAxis, [], layout);