Is it possible to have flex-direction: row text wrap as if it were one sentence?

movac 0
Viewed 35

I have a component that has a label and a sub-label. We are using Tailwind-ui. Normally it displays like so:

<label>
 <p>Label</p>
 <p>Sublabel</p>
</label>

Label
Sublabel

I am using flexbox to stack it as a column:

.label {
  display: flex;
  flex-direction: column;
}

We just got a request to allow the sublabel to be positioned inline with the label, but I'm facing an issue where, since flexbox obviously simply shifts the "box" of the sublabel next to the label, the two labels wrap strangely when they're long, like so:

 this is the    this is the 
 main label     sublabel

Is there a way using css to have the two labels wrap as if they were a single sentence, like so?

This is the main label this is 
the sublabel

Or is the only option to have a conditional html setup for inline vs stacked labels where the text is in the same P tag?

tailwind-ui tailwind-css css html
2 Answers

I don't think you can do that with flexbox with 2 p tags. The nearest outcome I can think of is using flex-wrap: wrap; so that when the texts are short, they can fit in two columns perfectly. Otherwise, they wrap like this

This is a header
This is a subheader

Here is a demo. demo-flex-wrap (try changing the view width to see the effect)

khoi nguyen0

That's what display: inline is for.

label {
  width: 200px;
  border: 1px solid black;
  display: block;
}

p {
 display: inline;
}

.sublabel {
  color: #afafaf;
}
<label>
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
 <p class="sublabel">Stet labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor </p>
</label>

cloned0
Related