Text and icon on the same line with Tailwind CSS?-CodePudding

I am trying to get the text on the left side and the icon on the right side, but right now the icon is above the text, see the first image. I want the icon to be in the top right corner to the right of “Project name”, and the text to be like the second image.

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div >
  <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
  </svg>
  <h2 >Project name</h2>
  <p >Explaination of the project</p>
  <p >Tag, tag, tag</p>
</div>

CodePudding user response：

Wrap both the title and the icon in a div with the class flex. This way they will be placed on the same line.

You can also add justify-between to move the icon to the right corner.

A great suggestion from Cornel Raiu in the comments about adding items-center to the mix, to vertically align both the title and the icon.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<div >
  <div >
    <h2 >Project name</h2>
    <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
    </svg>
  </div>
  <p >Explaination of the project</p>
  <p >Tag, tag, tag</p>
</div>

CodePudding user response：

Hope this helps .

 <div >
          <svg  stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="11" />
            <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
          </svg>
          <p >
            Icons
            <code >Next to Text...!</code> file
          </p>
        </div>

CodePudding user response：

You can add items-center along with justify-between class that will keep the icon completely verticle align to the heading.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div >
  <div >
    <h2 >Project name</h2>
    <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
    </svg>
  </div>
  <p >Explaination of the project</p>
  <p >Tag, tag, tag</p>
</div>