How to inline an href?

Question

I have something that looks like:

<ContentBlock
    className={'text-gray-300 mt-4'}
>
    Blah blah blah, blah BLAH, blah
    <a href="foo.bar" 
       className={'underline text-gray-200 hover:text-blue-300'}>
          foo bar
    </a>
</ContentBlock>

When displayed, the href link is always on a newline by itself. How can I make it stay "attached" to the previous text?

Answer 1

1. first option:

   you can use display: inline-block for both, a tag, and the element before

       .inline-block {
         display: inline-block;
       }

       <p class="inline-block"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !</p>
       <a href="" class="inline-block"> learn more</a>

2. second option:

   add the anchor tag inside text tag before it

       <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !
         <a href=""> learn more</a>
       </p>

3. third option:

   wrap them in flex

       .flex {
         display: flex;
         align-items: center
       }

       <div class="flex">
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, !</p>
         <a href=""> learn more</a>
       </div>