title: How to make image and div with whitespace-nowrap be in one line using tailwind-css?
body: <p>I basically want to make a picture and div with whitespace-nowrap be in one horizontal line regardless of the screen size using tailwind css. First of all, here is a picture when I have it on full screen:</p>
  <p><a href="https://i.stack.imgur.com/ndNNs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ndNNs.png" alt="enter image description here" /></a></p>
  <p>This is great. However, if I reduce my screen size, it becomes like below:
  <a href="https://i.stack.imgur.com/3AfHP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3AfHP.png" alt="enter image description here" /></a></p>
  <p>Just to be clear, I don't mind my text going over the screen due to whitespace-nowrap. However, I want my picture to be on the RIGHT side of the paragraph, not on the paragraph like below. So, I want my picture to be on the right side even though we won't be able to see the picture on the screen(unless ofcourse you scroll right).  Here is my html:</p>
  <pre><code>&lt;section class=&quot;text-gray-600 body-font bg-white&quot;&gt;
    &lt;div class=&quot;container mx-auto flex px-5 md:px-40 py-24 md:flex-row flex-col items-center items-stretch inline-block&quot;&gt;
      &lt;div class=&quot;lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center&quot;&gt;
        &lt;h1 class=&quot;title-font sm:text-xl text-lg mb-4 font-medium text-gray-500 tracking-tighter&quot;&gt;
          small heading
        &lt;/h1&gt;
        &lt;h1 class=&quot;title-font sm:text-5xl text-3xl mb-4 font-bold text-gray-900 tracking-normal 2xl:whitespace-normal whitespace-nowrap&quot;&gt;
          title for the div
        &lt;/h1&gt;
        &lt;p class=&quot;mt-5 mb-8 leading-relaxed text-xl 2xl:whitespace-normal whitespace-nowrap&quot;&gt;
          &lt;span class=&quot;text-yellow-600 font-bold text-2xl&quot;&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ipsum laudantium, consectetur in deserunt veniam. Asperiores fugiat necessitatibus nisi minus? Maiores ab, tempore quibusdam accusamus neque cum id modi esse.&lt;/span&gt;
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;lg:max-w-lg lg:w-full md:w-1/2 w-5/6&quot;&gt;
        &lt;a href=&quot;&quot; target=&quot;_blank&quot;&gt;
          &lt;img class=&quot;object-cover object-center rounded&quot; alt=&quot;tip_book&quot; src=&quot;https://dummyimage.com/720x600&quot;&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>Thank you, and please leave any comments or questions you have.</p>