How to make a text title where certain letters span two lines-CodePudding

I can't figure out how to make this in regular css or tailwind, any help appreciated, tried using a grid but couldn't make it compact enough, example below. Example of what it should look like.

<script src="https://cdn.tailwindcss.com"></script>

<div >
  <h1 >PR</h1>
  <h1 >ESIDENT</h1>
  <h1 >IZE</h1>
</div>

CodePudding user response：

I adjusted the line height and size of the smaller h1 and achieved the desired result.

<div className="w-2/3 grid grid-rows-2 grid-flow-col justify-center gap-y-0 self-center">
<h1 className="text-[256px] font-bold font-mono flex md:text-light-blue row-span-2"> PR</h1>
<h1 className="text-[115px] font-bold font-mono flex leading-[6rem] md:text-light-blue items-end p-0">ESIDENT</h1>
<h1 className="text-[115px] font-bold font-mono leading-[6.25rem] flex md:text-light-blue items-start p-0">IZE</h1>
</div>

CodePudding user response：

Instead of using grid, I tried creating it with a mix of flex and absolute positioning. If you want to have a different font size you might need to tweak the absolute positions:

<div >
  <div >PR</div>
  <div >
    <div >ESIDENT</div>
    <div >IZE</div>
  </div>
</div>

The idea is to use flex in order to position both parts of the header next to each other. Then we position the second part of the header to fit the first part with absolute positioning (top-20 and top-44).

Tailwind-play

CodePudding user response：

Try this:

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

.main_div p {
  margin: 0;
}

<div >
  <h1>PR</h1>
  <h5><p>ESIDENT</p><p>IZE</p></h5>
</div>