JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel">
            <div class="wb">
                <div class="header">My animals</div>
                <div class="around">
                    <select id="set" multiple="multiple" name="set" size="4"> … </select><input id="text" type="text" name="text"></input><input id="but" type="submit" value="Add new animal" name="but"></input>          
                </div>
            </div>
        </div>

CSS

.panel{
    display: inline-block;
    margin: 0px;
    padding: 2px;
    vertical-align: top;
    border: 0px none;
    text-align: center;  
}

.wb
{ 
    width:250px; 
    vertical-align: top; 
}

.header
{        
    text-align:left;    
    padding: 5px 15px 2px 15px; 
    margin: auto 0px;
    display:inline; 
    background-color: pink; 
    text-transform: uppercase;
}

#set
{
    display:inline-block;   
    width: 100%; 
    padding: 3px;
}

#but, #text
{
    display:inline-block;   
    width: 100%; 
    box-sizing:border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;
}

.around { 
    border: 3px solid pink; 
}