多列文本：第二，第三，第四列的第一行与第一列不对齐

Question

我正在使用css的多列布局，列与第一个不对齐，而是位于其下方。当我使用文本阴影时，我意识到这会使效果更糟。我设置了一个JSFiddle，在那里，删除文本阴影后，对齐错误就消失了（但是，在我的页面上，如果删除阴影，问题仍然存在，只是不那么明显）。

有什么办法解决这个问题吗？

JSFiddle

html：

<div class="info">
Lorem ipsum...
</div>

css：

.info {
position: fixed;
left: 9px;
top: 5px;
height: 90vh;
width: 100vw;
font-size: 20pt;
text-shadow: 0px 0px 2px rgba(0,0,0,0.7);
column-count: 4;
column-fill: auto;
display: block;
vertical-align: top;
}