JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
  <div class="my-container">
    <div class="plot-col">
      <div id="plotdiv1" class="plot-div"></div>
    </div>
    <div class="plot-col">
      <div id="plotdiv2" class="plot-div"></div>
    </div>
  </div>
</body>

CSS

.plot-div {
    max-width: 100%;
}

.plot-col {
    flex: 0 0 50%;
}

.my-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}

JavaScript

var trace1 = {};
var trace2 = {};

var plotdiv1 = document.getElementById("plotdiv1");
var plotdiv2 = document.getElementById("plotdiv2");

Plotly.newPlot(plotdiv1, [trace1]);
Plotly.newPlot(plotdiv2, [trace2]);

window.addEventListener("resize", function() {
        Plotly.Plots.resize(plotdiv1);
        Plotly.Plots.resize(plotdiv2);
});