如何使这两列始终具有相同的高度-CSS？

我知道我可以在样式表中静态设置

height

属性，但这不是我想要做的

我想要的是，由于左栏

class=content

的高度将动态变化（基于生成的内容），因此我希望侧栏

的高度也会变化，即使没有动态生成的内容

我该怎么做

（在真实的版本中，两列都直接挨在一起，但由于JSFiddle的查看窗口较小，所以不是这样）

Edit1

我宁愿只使用CSS来实现，而不使用JS（如果可能的话）

谢谢。
我的基于JS/Jquery的修改：
我的基于JS/Jquery的修改：
这有什么帮助吗？这个解决方案看起来很有趣，只是我不知道它是如何工作的。用
填充底部
和
空白底部
做了一些很时髦的事情…但是除此之外…我不太明白。我真的很喜欢这个解决方案，即JS解决方案，它很有效…但是如果我能得到一个CSS版本，我会非常喜欢。CSS在我发现的示例中有点奇怪，但它只适用于CSS。但是jquery方法要简单得多，更干净。我完全同意……如果有一个CSS解决方案像JS解决方案一样优雅，那就是我想要的。这个帮助？这个解决方案看起来很有趣，只是我不知道它是如何工作的。用
填充底部
和
空白底部
做了一些很时髦的事情…但是除此之外…我不太明白。我真的很喜欢这个解决方案，即JS解决方案，它很有效…但是如果我能得到一个CSS版本，我会非常喜欢。CSS在我发现的示例中有点奇怪，但它只适用于CSS。但是jquery方法要简单得多，更干净。我完全同意……如果有一个CSS解决方案像JS解决方案一样优雅，那就是我想要的。内容是生成一次还是更新？如果内容保持原样，那么它是一个简单的css解决方案，但如果不是，那么就不是。css是静态的，只有js是动态的。是的……每次加载页面时都会生成内容。所以我想你可以说是动态的……虽然我想象如果我使用SCSS、LESS或其他CSS框架，允许我启动变量，我可以这样设置
div
的高度……但我现在只使用普通CSS。内容是生成一次还是更新？如果内容保持原样，那么它是一个简单的css解决方案，但如果不是，那么就不是。css是静态的，只有js是动态的。是的……每次加载页面时都会生成内容。所以我想你可以说是动态的……虽然我想象如果我使用像SCSS、LESS或其他CSS框架这样的东西，允许我启动变量，我可以这样设置
div
的高度……但我现在只使用普通CSS。