html - 如何将 left 属性设置为等于内容的宽度

Question

我希望在文章的左侧出现一个侧面板，其中包含所有共享按钮等...

这就是我现在所拥有的，还不错，但我不想硬编码宽度，因为内容可能会改变，所以我想添加一个max-width，我想将左边设置为等于内容尺寸。

我知道我可以很容易地用 Javascript 做到这一点，但我想知道我是否不必这样做。

<article>
  <div class="side-panel" ></div>
  ...content...
</article>

article{
   position: relative
}

.side-panel{
   position: absolute;
   width: 20%;
   left: 20%;
}

编辑：根据要求，这是一个示例

标签： htmlcss