<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Moreflex.css">
</head>
<body>
    <!--If flex applied to form, child container uses the flex code instead of parent-->

    <div class="container">
        <form action="">
    <div class="form-row">
    <label for="name">name</label>
    <input type="text" id="name">

    </div>
    <div class="form-row">
        <label for="favor">Favorite color</label>
        <input type="text" id="favor">
    </div>
    </form>
    </div>

<div class="cont">
<div class=" side side-1">
    <h1>column</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
     Perspiciatis, temporibus. Dolorum perferendis,
      amet similique tenetur explicabo blanditiis omnis molestias 
      quidem error consequuntur eius deserunt odio dicta maiores mollitia eligendi assumenda.
    </p>
</div>
<div class="side side-2">
    <h1>column</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Perspiciatis, temporibus. Dolorum perferendis,

    </p>
</div>
<div class="side side-3">
    <h1>column</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Perspiciatis, temporibus. Dolorum perferendis,
      
    </p>
</div>
</div>

<div class="conts">
<div class="box box1">
    <h1>Blue</h1>
    <p>Lorem ipsum dolor sit 
     amet consectetur adipisicing elit.        
  Porro optio ullam sit, nihil distinctio quidem, 
illo maxime minima laborum veniam voluptatibus deleniti officia,
 reprehenderit earum nisi sed? Soluta, esse minus.</p>
</div>
<div class="box box2">
    <h1>green</h1>
    <p>Lorem ipsum dolor sit
        amet consectetur adipisicing elit.
        Porro optio ullam sit, nihil distinctio quidem,
        illo maxime minima laborum veniam voluptatibus deleniti officia,
        reprehenderit earum nisi sed? Soluta, esse minus.</p>
</div>
<div class="box box3">
    <h1>yellow</h1>
    <p>Lorem ipsum dolor sit
        amet consectetur adipisicing elit.
        Porro optio ullam sit, nihil distinctio quidem,
        illo maxime minima laborum veniam voluptatibus deleniti officia,
        reprehenderit earum nisi sed? Soluta, esse minus.</p>
</div>
</div>
   
    
</body>
</html>
.form-row {
    display: flex;
    background-color: white;
    padding: 10px;




}

.form-row label {
   


}


.form-row input {
   
}

body {
    background-color: grey;
}

.cont {
    background-color: white;
    display: flex;
    min-height: 300px;
    padding: 30px;
    border: 10px solid black;

}

.side {
    border: 5px black solid;
    flex: 1;


    
}



.side-2 {
    
  



}

.side-3 {





}



.conts{
    
    display: flex;
   justify-content: space-between;
  
   flex-direction: row;
 
    
  
  
  


}

.box {
    margin: 10px;
    
   
 
  
    
    
    
   
}


.box1 {
    background-color: lightblue;
 

}

.box2 {
    background-color: lightgreen;
   

}

.box3 {
    background-color: yellowgreen;
    

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.