.chartItemContainer{ position: relative; } .chartItemWrapper { position: absolute; transition: top 0.3s ease-in-out; /* Apply transition to chartItemWrapper */ left: 20px; right: 20px; } .chartItemWrapperActive { top: 200px; /* Move chartItemWrapper down when selected */ } .chartItemWrapperInactive { top: 0; /* Reset to original position */ } .dateSelectorWrapper { display: flex; justify-content: space-around; position: relative; overflow: hidden; } .dateSelector { flex-grow: 1; text-align: center; padding: 10px; border: 1px solid black; border-radius: 10px 10px 0 0; transition: all 0.3s ease-in-out; } .dateSelectorActive { color: black; border-color: black; z-index: 2; } .dateSelectorInactive { color: transparent; border-color: transparent; } .chartWrapper { border: 1px solid black; }