How to have vertical text next to horizontal text on tailwind css

Question

I'm struggling with tailwind layout and text placement i try to achieve a responsive layout for mobile screen and big screen:

This is what i try to do in tailwind play but it ain't working html

    <div class="grid sm:h-screen sm:grid-rows-2 lg:grid-cols-2">
      <section class="bg-black lg:h-screen text-white">
        <div class="grid grid-cols-2">
          <p class="texto rotate-180 text-5xl">EN BOUCHE:</p>
          <p class="text-5xl">Au premier abord déconcertant, il libère ensuite toute sa palette aromatique allant du fruit exotique à la fraicheur des Astéracées.</p>
        </div>
      </section>
      <section class="bg-white sm:h-screen">
        <div class="grid grid-cols-2 gap-1">
          <p class="text-5xl">"On parie que les hard seltzer ne sont pas une mode passagère mais le reflet de changements profonds des modes de consommation"</p>
          <p class="texto rotate-180 text-5xl">HARD SELTZER</p>
        </div>
      </section>
    </div>

css:

.texto {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Thanks for you answer time and attention.

Answer 1

Rather than rotate you can use an arbitrary class to apply a writing-mode of vertical-lr, so [writing-mode:vertical-lr].

Here's a Play: https://play.tailwindcss.com/DEdpOnhCvZ?size=552x720

Answer 2

I found writing-mode: sideways-lr; might work for your case but somehow it isn't supported by Chrome.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode