2 деления в одном ряду с максимальной шириной

У меня есть 2 divs, которые я хочу показать в одной строке, когда браузер изменит размер. На всех экранах он будет отображаться в одной строке, но теперь он ломается во второй строке, когда браузер изменяет размер.

HTML

<div class="navbar" id="navbar">
    <a href="#" class="logo">
        <img src="logo.png">
    </a>
    <div class="topnav-con">
        <div class="menu-top-menu-container">
            <ul class="nav-menu" id="menu-top-menu">
                <li><a href="#">nav 1</a></li>
                <li><a href="#">nav 2</a></li>
            </ul>
        </div>                                  
    </div>
</div>

CSS

.navbar {
    .max-width: 1310px;
}
.logo {
    float: left;
    margin-left: 20px;
    margin-right: 25px;
}
.topnav-con {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #7A9CBD;
    clear: none;
    float: left;
    max-width: 1203px;
    width: 100%;
}