CSS - Create two columns with different sizes, one fixed and one that takes up the rest of the row

Question

The gist of my issue is that I'm making an app with a tree view kind of system inside of it, with tabs that are collapsible and titles for those tabs. I'm having trouble separating the titles of the tabs into two different columns, one for the icon (chevron?) that indicates whether it is open or closed, and one for the actual title of the tab. This image is an example of my problem:

The first line of the tab is good. The part where it says "Gorge" is fine, and the inner tab's first line "A narrow opening between" is also fine, but when the text of the tab's title stretches out onto the next line, I don't want it going underneath the icon (chevron?) like it's doing here. Essentially, what I want is if, in the picture below, all the text in "A narrow opening between..." started past the red line, and there was no text at all in the green box.

I know this is possible in CSS because it seems like people who know CSS can create anything they could possibly ever want with it. But I am a peon. Please help.

Have you investigated CSS grid and CSS flex? – A Haworth Feb 13 '23 at 22:44 — A Haworth, Feb 13 '23 at 22:44
This may help: https://stackoverflow.com/q/37745051/3597276 – Michael Benjamin Feb 13 '23 at 22:50 — Michael Benjamin, Feb 13 '23 at 22:50

score 0 · Answer 1 · answered Feb 14 '23 at 00:33

The layout you are trying to achieve looks quite similar to a built-in nested list -- Indented tiers of text content, with a nice little icon that rests on the side. This can easily be achieved with a little margin, padding, and ::before pseudo-selector.

li {
  /* Just illustrating text wrap! */
  max-width: 200px;
}


.list h1 {
  font-size: 1rem;
}

.list p {
  /* If you inspect the user agent stylesheet (basic styles for
     HTML elements provided by the browser) for <ul> and <li>, 
     you will find something similar to the below 
  */
  margin-left: 15px;
  padding-left: 10px;
  
  /* Just illustrating text wrap! */
  max-width: 200px;
}

/* This puts the icon before each of our fake list items, but isn't part of the text area so will float beside it instead of in-line */
.list p::before {
  content: ">";
  position: absolute;
  left: 20px;
}

<ul>
  <li>Gorge<ul>
    <li>A narrow opening between hillsides or mountains...</li>
  </ul></li>
  <li>Ledge<ul>
    <li>a narrow horizontal surface projecting...</li>
  </ul></li>
</ul>

<div class="list">
  <div>
    <h1>Gorge</h1>
    <p>A narrow opening between hillsides or mountains...</p>
    <p>A narrow opening between hillsides or mountains...</p>
  </div>
  
</div>

CSS - Create two columns with different sizes, one fixed and one that takes up the rest of the row

1 Answers1