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 class="flex card bg-neutral h-48 px-3 hover:bg-primary">
<svg class="h-6 w-6" 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 class="text-2xl font-bold text-white py-3">Project name</h2>
<p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
<p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>
>Solution :
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 class="card bg-neutral h-48 px-3 hover:bg-primary">
<div class="flex justify-between">
<h2 class="text-2xl font-bold text-white py-3">Project name</h2>
<svg class="h-6 w-6" 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 class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
<p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>