[CLOSED] Need help with positioning elements in page

Question

Hi SoloLearners,

I'm really bad about web coding and I need your help about a code. It's a simple page which supposed to show a traffic light.

There's a display to the right side of the lights which was supposed to stick to the light by a <div> acting as a connector pipe. And to the bottom of the light, there's supposed to be a pole, where the light stands.

Now here's the problem, how do I position the display, the connector pipe and the pole correctly. Currently the layout turns into such a mess if the phone is tilted into landscape view.

And below is a link to the code.
Thank you, in advance 🙏

https://code.sololearn.com/W2Y8w6h0OMQ8/?ref=app

(Edit)
I decided it will stick to portrait view, couldn't find an easy way to adapt the code with landscape view.

Answer 1

Ipang bro. See this code
https://code.sololearn.com/WMDpGTNTe1r8/?ref=app

Answer 2

Bro you should use left and top instead of margin in the css e.g
#red{
position:relative;
left:100px ;
top:100px;
}

Answer 3

ツ Priyanshi ツ {PTP}
Thank you so much for the response sis . The pole is now looks good and nice, but the countdown display screen is still far to the right in landscape mode. I need help with that too, if you don't mind.

Can you please add comment in your code so I can see where the changes been made?

Thanks again 🙏