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

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.

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>