When I try to display:flex the parent the images are not coming in a row [closed]

<div class= "ban"><div class= "ban1"><img src= "Images/2.jpg"></div><div class= "ban2"><img src= "https://img.freepik.com/vector-premium/plantilla-banner-plant-shop_401787-228.jpg">    /div></div>    .ban{    display:flex;background: black;transition: transform 0.3s ease-in-out;width: 100%;height: 100%;       }    .ban >.ban1 img{width: 15%;height: 15%;    }    .ban >.ban2 img{width: 40%;height: 40%;    }

Why flex wont work from parent to child containing img src when called. Please guide what am I doing wrong here.