Yes, absolutely. The exact "how" depends on what you want it to look like. In general, the simplest starting point is to wrap things individually in another <div>....</div> which helps isolate them. However, you might take note of my recent posts on layouts where I give a couple of examples of layouts that you could use.
As a really simple starting point, here are a couple of index.html files you could use that will give slightly different looks:
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Examples for smanjunath211 - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Examples for smanjunath211">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
<!-- #endregion -->
</head><body class="uib">
<h1 class="with-subtitle">Examples for smanjunath211</h1>
<div role="doc-subtitle">Using the uibuilder IIFE library.</div>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
<div>
<div id="chart"></div>
</div>
<div>
<div id="something else"></div>
</div>
</body></html>
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Examples for smanjunath211 - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Examples for smanjunath211">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
<!-- #endregion -->
</head><body class="uib">
<h1 class="with-subtitle">Examples for smanjunath211</h1>
<div role="doc-subtitle">Using the uibuilder IIFE library.</div>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
<article>
<div id="chart"></div>
</article>
<article>
<h2>This is a heading for something else</h2>
<div id="something else"></div>
</article>
</body></html>
Div and article are 2 block elements. The uibuilder brand CSS includes formatting in particular for the article tag and you will see it being used in the 2nd of those posts but you can also use it "naked" as I have above.
Just remember that HTML is a tree structure at its heart (or a hierarchy if you prefer). So keeping a logical structure will really help.
When you use the no-code nodes, if you check the HTML that gets created, you will notice a very clear and logical structure.
You will get there. You've launched into something reasonably complex but you already have a lot of HTML so you've some knowledge already.
