下面放置使用Flexbox的

另一個DIV一個div我有標記，像這樣：下面放置使用Flexbox的

HTML：

<ListElementRoot> 
    <ListElementText> 
    {children} 
    </ListElementText> 
    <ListElementDescription> 
    {description} 
    </ListElementDescription> 
</ListElementRoot>

//platform.web.js

export const ListElementRoot = div(style.root) 
export const ListElementIcon = div(style.icon) 
export const ListElementText = div(style.text) 
export const ListElementDescription = div(style.description)

// CSS

.root { 
    display: flex; 
    width: 100%; 
    height: 56px; 
    align-items: center; 
    border-top: 1px solid var(--color-gray2); 
    padding: 0; 
} 

.icon { 
    position: absolute; 
    width: 28px; 
    height: 28px; 
    align-items: center; 
    padding-left: 18px; 
} 

.text { 
    color: #000; 
    font-size: calc(var(--font-size-body)/10)rem; 
    padding-left: 64px; 
} 

.description { 
    color: #000; 
    font-size: calc(var(--font-size-body)/12.3)rem; 
    padding-left: 64px; 
}

我是flexbox的新手。我該如何製作元素？

我試圖找到一個解決方案，但它在我的flexbox（現在）嚴重扭曲。有任何想法嗎？

編輯：

沒有flex-direction：column;