score:1

Accepted answer

this should work:

<grid container direction="row">
  <grid classname="right" id="b" item lg={show ? 12 : 9}>{'otherchildren'}</grid>
  <grid classname={show? "left left-hide" : "left"} id="a" item lg={3}>{'children'}</grid>
</grid>

css


.right {
  transition: ease 0.5s;
}

.left {
  transition: ease 0.5s;
  overflow: hidden;
}

.left-hide {
  flex-basis: 0% !important;
}


Related Query

More Query from same tag