JSFiddle - React, Tailwind, and code Playground
HTML
<div style="width:95px;height:35px;overflow-y:hidden;z-index: -1;">
<div id="Div1" class="rowDiv" style="background-color:#b0c4de;" onClick="div1Click()">
<label class="mylabel">My label</label>
</div>
<div id="Div2" class="rowDiv" style="background-color:#FF0000" onClick="div2Click()"></div>
<div id="Div3" class="rowDiv" style="background-color:#00FF00" onClick="div3Click()"></div>
</div>
CSS
.rowDiv {
float:left;
width:30px;
height:30px;
z-index: -1;
}
.mylabel {
pointer-events: none;
left: 40px;
position: absolute;
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
z-index: 2;
}
JavaScript
function div1Click() {
alert("Div1 clicked");
}
function div2Click() {
alert("Div2 clicked");
}
function div3Click() {
alert("Div3 clicked");
}