Css 在响应式设计中，如何使一根柱子收缩，而另一根柱子保持固定长度

我在一个有两个栏目的网站上工作，需要适应快速响应的设计。这似乎不是一个艰难的场景，但由于某种原因，我无法让CSS实现我想要的

列B（右）需要保持固定长度-180px。列A（左）需要用10像素的填充填充列B不占用的所有空间。我已经尝试了一段时间，但没有得到我想要的结果

当场地达到一定宽度时，B列下降到a列下方，两列的宽度均为100%。我让那部分工作。只需要帮助缩小列A作为网站缩小。谢谢

您的HTML：

<div id="wrap">
    <div id="a"></div>
    <div id="b"></div>
</div>

---

当你说长度时，你是指宽度吗？请包括你尝试过的相关代码。？

#wrap {
    display: table;
    height: 100px;
    width: 100%;
}

#a, #b {
    border: 1px solid red;
    display: table-cell;
}

#b {
    width: 180px;
}