Is it possible to style HTML's details tag like this?

Question

This is what I am trying to achieve,

> Variable Length Title:    A sentence worth of text that may or may
                            not wrap depending upon the width of the
                            container.

                            This is the text that is not in the
                            summary tag but still is in the details
                            tag therefore hidden unless clicked on. 

The html looks something like,

<details>
  <summary>
    <span class="left">Variable Length Title:</span>
    <span class="right">
      A sentence worth of text that may or may
      not wrap depending upon the width of the
      container.
    </span>
  </summary>
  <p>
    This is the text that is not in the
    summary tag but still is in the details
    tag therefore hidden unless clicked on.
  </p>
</details>

An inelegant solution I can think of is setting a generous width to .left with display: inline-block; and left padding for details p but this still leaves me with the issue of text wrap where wrapped text starts at the beginning of the line.

If possible then I am looking for CSS only solutions.

Answer 1

If you're allowed to change the HTML a bit, you could do something like this:

• Duplicate the title as the previous sibling of the <p>.
• Hide it but keep it's width using visibility: hidden;.
• Wrap the duplicated title and the paragraph in a <div>.
• Take advantage of grid.
• Remove marker.

summary, div {
  display: grid;
  grid-template-columns: auto 1fr;
}

.visibility-hidden {
  visibility: hidden;
}

/* Hide marker */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

<details>
  <summary>
    <span class="left">Variable Length Title:</span>
    <span class="right">
      A sentence worth of text that may or may
      not wrap depending upon the width of the
      container.
    </span>
  </summary>
  <div>
    <span class="visibility-hidden">Variable Length Title:</span>
    <p>
      This is the text that is not in the
      summary tag but still is in the details
      tag therefore hidden unless clicked on.
    </p>
  </div>
</details>

Answer 2

details{
position:relative;
margin-bottom:10px;
}
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  position:relative;
  left:0;
  width:300px;
}

details > div {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
  position:absolute;
  top:0;
  left:330px;
}

<details>
  <summary>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

<details>
  <summary>Featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

Okay! you have to be very careful while using details > summary. If you are using large scale application then I would suggest you to use Tabs/Accordion/Collapse.

Here is CSS code:

details{
position:relative;
margin-bottom:10px;
}
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
  position:relative;
  left:0;
  width:300px;
}

details > div {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
  position:absolute;
  top:0;
  left:330px;
}

Here is the updated HTML code:

<details>
  <summary>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>

<details>
  <summary>Featuring exciting attractions, international pavilions</summary>
  <div>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
   </div>
</details>