Can anyone help me figure out how to use flexbox to display two columns side by side? The first column should be a mat-input input box and the second one a mat-select dropdown. I want both items to have the same width with a gap between them, so I've tried calculating the width using the following code:
width: calc((200% - #{$gap}) / 2);
I chose 200% because I want the child elements' width to be half of the parent's width. However, I'm encountering two issues:
- The first column is not being displayed.
- The width and height of the second column are not as expected.
If you can assist, please check out the StackBlitz Demo.