Align List contents with Grids

How does one on align list header and list content next to each other (inline) using React Semantic UI grid system?


          <List>
            {content.title && (
              <List.Item>
                <List.Header>Name </List.Header>
                <List.Content>{content.title}</List.Content>
              </List.Item>
            )}

            {content.description && (
              <List.Item>
                <List.Header>Summary</List.Header>
                <List.Content>{content.description}</List.Content>
              </List.Item>
            )}
          </List>

image

Maybe cards ?

Thank you @tiberiuichim

Wrapping the list element in Segment.Inline seems to align elements without adding external CSS entries.

https://react.semantic-ui.com/elements/segment/#types-placeholder-inline