css - 2 つのスパンが並んでいる場合、レスポンシブ デザインを CSS に実装するにはどうすればよいですか?

Question

デザインの課題があります。私は2つのスパンを並べて持っていますが、そのようなCSSを実行してレスポンシブにする方法が本当にわかりません. 1 つのビュー ポート サイズでは余白が大きすぎ、別のビュー ポートでは 2 つの余白が小さすぎます。間に大きなスペースを入れずに、すべての画面サイズで同じように見えるようにする方法について何か提案はありますか?

私のCSS：（私はそれがちょっと長いことを知っています）

#lattice {
height: 93%;
width: 30%;
position: fixed;
background-color: white;
top: 40px;
right: .75%;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
overflow-y: scroll;
}
#intendedContent {
font-size: 16px;
position: fixed;
background-color: white;
top: 40px;
left: 1%;
display: inline-block;
overflow-y: scroll;
height: 93%;
width: 62.5%;
padding-left: 20px;
padding-top: 0px;
padding-right: 20px;
word-wrap: break-word;
line-height: 175%;
}

XMLHttpRequest オブジェクトに依存しているため、実際には 2 つのスパンしかありません。

        <span id="intendedContent">
        </span>
        <span id='lattice'>
        </span>