Анимация, когда элемент появляется во flexbox

Question

У меня есть HTML (React JSX)

       <div className="top">
        <div className="map-wrapper">
          <SVG />
        </div>

        <div className="abc">Some content on the right</div>
      </div>

И это CSS:

.map-section .top {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.map-section .top .map-wrapper {
  max-height: 35em;
  max-width: 35em;
  width: 100%;
}
.map-section .top .abc {
  display: none;
  width: 5em;
  background: green;
  height: 5em;
}

"top" - это flexbox. Div с классом "ab c" не всегда отображается, только когда я нажимаю кнопку. Первоначально «map-wrapper» выравнивается по центру, но когда «flex c» всплывает в окне «flex» (например, через display: block), я хочу, чтобы «map-wrapper» скользил влево в плавная анимация, чтобы оставить место для "ab c" справа. Как это будет сделано? Я использую ReactJS, но любой ванильный ответ JS / CSS в порядке! Спасибо.