inline flexbox

working with vertical alignment of flex items when using an inline-flexbox display

by kpowz

HTML

<form>
 <span>
    <label for="place-reference">Place reference</label>
    <input type="text" id="place-reference" autofocus></input>
    </span>
    <!--<textarea autofocus rows="2" cols="75" id="plnce"></textarea> -->
  
    <fieldset>
        <legend>Pin behaviors</legend>
        <input type="checkbox" value="clear" checked>clear pins</input>
        <input type="checkbox" value="keep">keep pins</input>   
               
    </fieldset>
           <input id="button" type="button" value="Map it"></input>

</form>

CSS

form{
	display: inline-flex;
    width: 100%
}
body{
 //   margin: 0;
}
#button{
    flex: 1 6 10%;

}
form input[type=button]{
	float: right;
}

fieldset{
	flex: 1 6 20%;
    min-width: 115px;
}

span{
	flex: 3 1 65%;
    border:1px solid red;
}

#place-reference{
	width: 	100%;
    box-sizing: border-box;
}