React JS buttons with css align on top of each other instead of horizontal align

Question

I am working on React JS application. I have two buttons which I wanted to be equal width. Initially they are aligned next to each other. When I increased the button size with col-sm-8, the button were rendered on top of each other. When I hit F12, I checked that there was no margin or padding next to the button and confused why the buttons are forced to aligned on top of each other when the width is increased. There is enough room.

I tried a few styling changes like justify-items: center, aligned-items: center but so far nothing is working.

Here is my code

<div className={'my-toolbar'}>
 <div className={''my-btn-group}
   <button className={'col-sm-8'}>{'AAAAAAAA'}</button>
   <button className={'col-sm-8'}>{'BBBBBBBB'}</button>
 </div>
</div>

css

.my-toolbar {
 display: flex;
 aligned-items: center;
 font-size; 16px
}

.my-btn-group {
 display: inline-block
 white-space: nowrap
}

Answer 1

You are mixing two type of display in CSS display: inline-block and display: flex
concentrate only on flex try this

.my-toolbar {
 display: flex;
 align-items: center;
 font-size; 16px
 }

 .my-btn-group {
 flex: 1
 }

Answer 2

Try This:

.my-btn-group{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}

and remove display:inline-block and white-space...