Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. 

Semantic UI List is used to group related content. It is an easy way to show the list of items as they are needed for our website many times. List floated content Variation is used to float the element on the left or the right.

In this article, we will discuss Semantic UI List floated content variation.

Semantic-UI List Floated content variation classes:

• left floated: This class is used to float the content on the left.
• right floated: This class is used to float the content on the right.

Syntax:

<div class="ui List-Floated-Content-Variation-Class list">
      ...
</div>

Example 1: The following code demonstrates the Semantic-UI List left floated content variation.

Output:

Left Floated Content Variation

Example 2: The following code demonstrates the Semantic-UI List right floated content variation.

Output:

Right Floated Content Variation

Reference: https://semantic-ui.com/elements/list.html#floated