How can I keep text on the same line as an icon?

When using TailwindCSS, there are multiple ways to keep text and icons on the same line. Typically, this can be achieved using Flexbox, which is a CSS layout model that easily aligns and distributes child elements along a single axis.

For example, consider a simple HTML structure containing an icon and some text, where we want them to appear on the same line:

html
<div class="flex items-center">
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <!-- SVG content here -->
    </svg>
    <span>some text</span>
</div>

In this example, the div element uses the flex class, which turns the container into a flex container. The items-center class is used to vertically center all child elements. As a result, the icon and text appear on the same line, with the text vertically centered relative to the icon.

Additionally, if you need to adjust the spacing between the icon and text, you can use margin-related classes on the icon or text. For example, to add some space after the icon, you can modify the svg element's class:

html
<svg class="h-6 w-6 mr-2">
    <!-- SVG content here -->
</svg>

Here, mr-2 represents "margin-right: 0.5rem", which adds a certain amount of spacing between the icon and text.

By using this approach, we can ensure that text and icons remain on the same line across different screens and devices, with good alignment and spacing. This layout technique is very useful when creating buttons, navigation links, or any interface elements that require icon and text combinations.