Here is the code snippet I am working with and I need assistance in positioning the div elements accordingly:
<div id="outer" style="width:300px">
<canvas></canvas>
<div id="inner">
<div class="a"> val1 </div>
<div class="a"> val2 </div>
<div class="a"> val3 </div>
<div class="a">val4</div>
</div>
</div>
.a{
'overflow': 'hidden',
'text-overflow': 'ellipsis',
'white-space': 'nowrap'
}
I am looking to position the inner div relative to the canvas element within the outer div. If I set the position attribute to "bottom", the inner div should align horizontally centered below the canvas. Alternatively, if I set it to "right", the inner div should be vertically centered to the right of the canvas. I have attempted various JavaScript and CSS approaches without success. In case there is limited space within the outer div, I would like the text inside the inner div to shrink and end with ellipsis (...). Can someone please assist me with this issue?