Tryit Editor v1.8

Source Code:
<!DOCTYPE html> <html> <head> <style> .box { display:-ms-flexbox; display:-moz-box; display:-webkit-box; display:box; width:200px; height:100px; border:2px solid red; } </style> <script> function ChangeBoxAlign(x) { // Returns the selected option's text var boxAlign=x.options[x.selectedIndex].text; var div=document.getElementById("myDiv"); if (div.style.MozBoxAlign!==undefined) { div.style.MozBoxAlign=boxAlign; } else if (div.style.webkitBoxAlign!==undefined) { div.style.webkitBoxAlign=boxAlign; } else if (div.style.msFlexAlign!==undefined) { div.style.msFlexAlign=boxAlign; } else { alert("Your browser doesn't support this example!"); } } </script> </head> <body> <div class="box" id="myDiv"> <b>first child</b> <i>second child</i> </div> <select onchange="ChangeBoxAlign (this);" size="6"> <option selected="selected" />baseline <option />center <option />end <option />inherit <option />start <option />stretch </select> <p><b>Note:</b> This example does not work in Opera, or Internet Explorer 9 and earlier.</p> </body> </html>
Result:
W3Schools.com - Try it yourself