I have a simple HTML & Bootstrap element initiation as follows:

        <div class="container-fluid d-flex g-0 gap-3" id="map-div">
            <div class="row-fluid d-flex g-0 justify-content-around" id="map-row">
                <div class="d-flex g-0" id="map-col">
                    <svg id="map-svg"></svg>
                </div>
            </div>
        </div>

In my JavaScript, under certain conditions I add a sibling to the map-col as follows:

legend = d3.select("#map-row").insert("div")
    .attr("id", "legend-col")
    .attr("class", "g-0 fade-in shadow lh-sm")
    .style("height", "80%")
    .style("align-self", "center")

Is there a simple way (maybe with Bootstrap tags?) to animate the map-col transition to its new location without explicit specification, akin to "data-mdb-animation": "slide-left"?