I've been working on this code snippet for quite some time, but I can't seem to find a solution that keeps the two div elements horizontal when resizing the browser window.
<!DOCTYPE html>
<head>
<style>
#ONE {
float: left;
border: 1px solid red;
width: 500px;
height: 50px;
}
#TWO {
float: left;
border: 1px solid yellow;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<header>
<div id="ONE"></div>
<div id="TWO"></div>
</header>
</body>
</html>
Every attempt I make results in the "TWO" div dropping below "ONE" on resizing. How can I achieve my goal of keeping them side by side without depending on screen width changes?