반응형 홈페이지를 제작하는데 게시판의 제목 길이를 어떤식으로 지정 해야 되나요?

길이가 있는데 자연스럽게 줄어들순 없어요. 아래 코드를 참고하세요.

어디 올려놓고 브라우저 가로폭을 줄였다 늘였다 테스트 한번 해보세요.

일정폭 이하가 되면 제일 긴 제목에 한줄(100%)을 할당하고

나머지 요소들은 아랫줄로 보내버리는 식이죠.

제목과 함께 기타 요소들을 한줄로 유지하려면 제목이 너무 길어서 밸런스가 무너져요

    <style>
        * { box-sizing:border-box; border:1px solid; }

        #max-box { width: auto; max-width:1000px; }

        #titles { width: 60%; float: left;   white-space:nowrap;  overflow: hidden;  text-overflow: ellipsis;  }

        #right-things { width: 40%; float: right; }

        @media ( max-width: 720px ) {
            #titles { float: none; width: auto; }
            #right-things { float: none; width: auto; }
        }
    </style>

    <div id="max-box">

        <div id="titles"> 여기 제목 길게 길게 길게 길게 길게 길게 길게 길게 길게 길게 길게 </div>
        <div id="right-things"> 우측요소1 우측요소2 우측요소3 우측요소4 </div>

    </div>