.chartItemContainer{ position: relative; font-size: 14px; } .chartItemWrapper { position: absolute; transition: top 0.3s ease-in-out; /* Apply transition to chartItemWrapper */ left: 20px; right: 20px; } .chartItemWrapperActive { top: 275px; /* 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; transition: all 0.3s ease-in-out; font-weight: 600; } .dateSelector:first-child { flex-grow: 1; text-align: center; padding: 10px; /* border-radius: 10px 0 0 0; */ transition: all 0.3s ease-in-out; font-weight: 600; } .dateSelector:last-child { flex-grow: 1; text-align: center; padding: 10px; /* border-radius: 0 10px 0 0; */ transition: all 0.3s ease-in-out; font-weight: 600; } .dateSelectorActive { color: black; z-index: 2; } .dateSelectorInactive { color: transparent; /* border-color: transparent; */ } .chartWrapper { /* border: 1px solid rgb(179, 177, 177); border-radius: 0 0 11px 11px; */ }