body { display: flex; flex-direction: column; align-items: center; } #light1 { width: 100px; height: 300px; padding: 10px; border-radius: 40px; display: flex; flex-direction: column; background-color: black; margin: 10px; } #light2{ width: 100px; height: 200px; padding: 10px; border-radius: 40px; display: flex; flex-direction: column; background-color: black; margin: 10px; } .red { width: 100px; height: 100px; border-radius: 50%; background-color: red; visibility: visible; } .yellow { width: 100px; height: 100px; border-radius: 50%; background-color: yellow; visibility: hidden; } .green { width: 100px; height: 100px; border-radius: 50%; background-color: green; visibility: hidden; } .btn { background-color: coral; border-radius: 50%; width: 100px; height: 100px; display: flex; text-transform: uppercase; justify-content: center; align-items: center; border: 1px solid black; margin: 20px; }