Flexbox alignment with images and text inside same container

Question

I am making a flexbox Employee ID card layout. The employee\'s picture will go to the left and the employee\'s info (name, employee-id, department, etc) will go to the right of

Answer 1

Just wrap your info in a container set to display: inline-block:

HTML

    
    

       
Field 1
       
Field 2
       
Field 3
    

CSS

.info-container{
   display: inline-block;
   vertical-align: top;
   padding: 0 0 0 5px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.info-container p{
    padding: 0;
    margin: 0 0 10px;
}

FIDDLE