css - 幅が固定されていない左要素と右要素の間の残りのスペースを div で埋める

Question

わかりました... 2 つの div 間の残りのスペースを埋める方法について、同様の質問がたくさんあることは知っています。ただし、左側と右側の要素が常に同じ幅であることに期待する必要がないため、どれもうまくいきません。それが理にかなっていることを願っています。

これが私のhtmlです：

<section id="recent-news-posts" class="light-gray-section">
    <h1>
        <div class="h1-first">
            Recent
        </div>
        <div class="h1-second">
            NewsPosts
        </div>
    </h1>
    <div class="line">&nbsp;</div>
    <div class="green-button">Read All News</div>
    <div class="content">
        Content
    </div>
</section>

そして、ここに私が現在持っているcssがあります：

.light-gray-section {
    background-color:#e4e0db;
    display:block;
    margin:0px;
}

    .light-gray-section h1 {
        text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
        font-weight: 500;
        padding-left: 30px;
        padding-top: 30px;
        padding-bottom: 15px;
        margin:0px;
        float:left;
    }

        .light-gray-section h1 .h1-first {
            color:#142114;
            display:inline;
        }

        .light-gray-section h1 .h1-second {
            color:red;
            display:inline;
        }

    .light-gray-section .line {
        display:inline-block;
        height: 45px;
        width:100px;
        margin-left: 10px;
        margin-right: 10px;
        border-bottom: 3px solid #9ec096;
    }

    .light-gray-section .green-button {
        float:right;
        /* IE10 Consumer Preview */ 
        background-image: -ms-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
        /* Mozilla Firefox */ 
        background-image: -moz-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
        /* Opera */ 
        background-image: -o-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
        /* Webkit (Safari/Chrome 10) */ 
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4C9444), color-stop(1, #2D5E27));
        /* Webkit (Chrome 11+) */ 
        background-image: -webkit-linear-gradient(top, #4C9444 0%, #2D5E27 100%);
        /* W3C Markup, IE10 Release Preview */ 
        background-image: linear-gradient(to bottom, #4C9444 0%, #2D5E27 100%);
        border-radius: 5px;
        padding:5px 10px 5px 10px;
        color:white;
        margin-right:30px;
        margin-top:30px;
        float:right;
    }

    .light-gray-section .content {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        clear:both;
    }

h1 と右側のボタンの間のスペース (余白を除く) の 100% を線で埋める必要がありますが、キラーは、h1 とボタンのコンテンツを変更できるようにする必要があることです (私の asp.net アプリケーションで) 幅を変更する可能性が非常に高いため、幅をハードコードすることはできません。同様のレイアウトに対して私が見つけたすべての解決策には、幅を左右の要素にハードコーディングすることが含まれます。

このコードがコンテキスト外で機能することを願っています (笑)。今はもちろん、真ん中の線の幅を 100px にハード コードして、正しい場所に表示され、まだ見えるようにしています。width:100% を試してみると、含まれるセクションと同じ幅になり、次の行に落ちて、その次の行にボタンを押します。

表のセルに頼る必要がないことを願っています...中央のセルの幅を100％に設定すると、これが機能する可能性があると思います（試したことはありませんが）。