JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <link rel="stylesheet" href="Styles/StylesheetSample.css" />
</head>
<body>
    
        <div id="menu">

        </div>

        <div id="main">
            <div id="image">
               
                <img class="img" src="http://forum.alsacreations.com/upload/55423-CCITT1-1.png" /> 
            </div>

            <div id="input">
                <span>label 1</span>
                <span>label 2</span>
                <span>label 3</span>
                <span>label 4</span>
                <span>label 5</span>
            </div>
        </div>

        <div id="summary">
            <div id="zoom">

            </div>

            <div id="text">

            </div>
        </div>

        <div id="footer">

        </div>
    
</body>
</html>

CSS

html,body{
	margin: 0;/*supprime les des marges blanches*/
	padding: 0; /*supprime les des marges blanches*/
	height: 100%; /*une hauteur de 100%*/
	min-height: 100%; /*je pense que on peux le supprimer si il n'y a pas de bug sans*/
}

.img{

	max-width: 100%; /*force l'image à prendre 100% de la largeur*/
	 /*prend 100% de la hauteur de #image*/
	margin: 0 auto; /*centre l'image dans #images vous pouvez réututiliser cette classe pour faire pareil dans d'autres div*/
	display: block; /*permet de centrer l'image grâce à Margin : 0 auto; */ 
}
#menu {
    height: 5%;
    background-color: black;
}

#input{
	float: right; /*aligne à droite*/
	width: 800px;
	background-color: blue;
	display: inline-block;
	max-height: 100%;
	height: 100%; /*occupe toute la place en hauteur*/
}

#image{
	background-color: yellow;
	position: absolute;
	left: 0; /*occupe toute la place à gauche*/
	top: 0;/*occupe toute la place en haut*/
	right: 800px; /*laisse 800px à droite pour #input*/
	bottom: 0; /*occupe toute la place en bas*/
	overflow-y: scroll;
	 
}

#main{
	width: 100%;
	height: 65%;
	max-height: 65%;
	display: block;
	position: relative;
}
#summary{
	height: 25%; /*occupe 25% les éléments dedans s'adaptent automatiquement*/
}
#text{
	height: 100%;
	display: inline-block;
	float: left; /*aligne à gauche*/
	width: 40%;
	background-color: RED;
}
#zoom {
    width: 60%;
    background-color: Orange;
	height: 100%; /*occupe toute la place en hauteur*/
	float: left;
	display: inline-block;
}
#footer{
	height: 5%;
	background-color:green;
}