/*Réaliser un afficahe de deux blocs*/
*{
    box-sizing:border-box;
}
.container{
    width: 800px;
    margin: 0 auto;
    vertical-align: top;
    border: 4mm ridge rgba(170, 50, 220, .6);
}
.container p{
    margin: 0 auto;
}

.blue{
    width: 80%;
    height: 100%;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    padding:15px;
}
.green{
    background-color: pink;
}
.green2{
    background-color: green;

}
.red{
    width: 18%;
    height: 150px;
    background-color: red;
    display: inline-block;
    vertical-align: top;
}

/* Version mobile et tablette*/

@media screen and (max-width: 800px){

.container{
    width: 100%;
    margin: 0 auto;
    vertical-align: top;
    border: 4mm ridge rgba(170, 50, 220, .6);
}
.container p{
    margin: 0 auto;
}

.blue{
    width: 100%;
    height: 100%;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    padding:15px;
}
.green{
    background-color: pink;
}
.green2{
    background-color: green;

}
.red{
    width: 100%;
    background-color: red;
    display: block;
}
}