以html动态样式覆盖flexbox align-items

Question

在jsfiddle示例中，我有4个div并排，每个div在列中有一些元素。第一个div的内容很长，在垂直堆叠其他列时我需要一些灵活性。

在CSS中，默认使用align-items：

使列元素在顶部堆叠

div.flex {
    ...
    align-items: flex-start;
}

但是我需要能够以内联html样式动态覆盖它，以便能够在顶部，拉伸或底部堆叠其他列：

<style type='text/css'>
        #left { 
            align-items: flex-start;
            flex: 1;  
            background-color: beige;
        } 
        #middle { 
            align-items: stretch;
            flex: 1;  
            background-color: lightblue;
        } 
        #right { 
            align-items: flex-end;
            flex: 1;  
            background-color: salmon;
        } 
</style>

虽然我可以使用align-items修改CSS中的垂直堆叠，但是当我在ID级别执行时，它在内联HTML样式中不起作用。此外，当它在CSS中时，flex-end在内联和垂直时水平对齐。所以任何帮助都非常感谢。

jsfiddle