Html 当宽度随窗口大小变化时，如何对齐单独div中的元素？

我有一个搜索输入和一个结果元素。两者都在单独的div/容器中，但我需要它们在窗口大小更改时对齐。我很确定有比使用Javascript更好的方法

一个窗口大小： 较小的窗口：

我使用这个：我很喜欢它，但关于响应性设计，我显然做错了什么。无论屏幕宽度如何，让两个元素对齐应该不会这么难。有什么建议吗

我的HTML

    <div class="header-section">
    <div class="uk-container uk-container-center uk-text-center">
        <h1 class="uk-h1" id="head1">Search</h1>
        <h1 class="uk-h1" id="head2">Lab</h1>
    </div>
</div>

<div class="input-section">
    <div class ="uk-container uk-container-center uk-text-center">
        <form id="search-form" class="uk-form">
            <input id="search-input" type="text" placeholder="Bing Engine ">
            <button id="search-btn" class="uk-button uk-button-primary" type="button">Search</button>
        </form>
    </div>
</div>

<div class="results-section">
    <div id="results-container" class="uk-container uk-container-center uk-width-1-2">
        <div class="result">
            <a class="result-title" href="#">Bhutan travel advice</a>
            <div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
            <p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
        </div>
    </div>
</div>

搜寻
实验室
搜寻
https://www.gov.uk/foreign-travel-advice/bhutan
不丹最新旅行建议，包括安全和安保、入境要求、旅行警告和健康

我觉得很干净

我的CSS:

使用CSS：

@media(min-width:800px) {
   // your CSS for a small width
}

---

你的提琴：你想让它们如何对齐？结果的开头就在横条的开头。提琴与你的屏幕截图不匹配。如果您希望输入框处于与结果相同的水平位置，那么小提琴已经做到了！OP说：“我很确定有一种比Javascript更好的方法。”