JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="graph">
		<div class="draw-area">
			<div id="graph-containment-wrapper">
				<div class="draggable ui-widget-content"></div>
				<div class="draggable ui-widget-content"> </div>
				<div class="draggable ui-widget-content"> </div>
				<div class="draggable ui-widget-content"> </div>
				<div class="draggable ui-widget-content"> </div>
				<div class="lines" id="myline0"></div>
				<div class="lines" id="myline1"></div>
				<div class="lines" id="myline2"></div>
				<div class="lines" id="myline3"></div>
			</div>
			<div class="hlines-container">
				<div class="hlines"></div>
				<div class="hlines"></div>
				<div class="hlines"></div>
				<div class="hlines"></div>
				<div class="hlines"></div>
				<div class="hlines"></div>
			</div>
		</div>
		<div class="x-axis">
			<div class="item">20°C</div>
			<div class="item">30°C</div>
			<div class="item">40°C</div>
			<div class="item">50°C</div>
			<div class="item">60°C</div>
		</div>
	</div>
</body>

</html>

CSS

.lines {
	padding: 0px;
	margin: 0px;
	height: 1px;
	background-color: orange;
	position: absolute;
}
.draggable {
	width: 30px;
	height: 30px;
	background: orange;
	border-radius: 30px;
	cursor: n-resize;
	top: 200px;
	z-index: 1;
	border: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}



.x-axis {
	display: flex;
	justify-content: space-around;
	width: 100%
}

#graph-containment-wrapper {
	display: flex;
	justify-content: space-around;
	height: 20rem;
	background-color: white;
}
.graph {

	-webkit-user-select: none;
}


.draw-area{
	width: 100%
}

.hlines{
	background-color: lightgray;
	width:100%;
	height: 1px;
	display: flex;
}


.hlines-container{
	display:flex;
	min-height: 100%;
	justify-content: space-between;
	flex-direction: column;
	padding: 15px;
	height: 20rem;
	margin-top: -20rem
}