How do I fix the summary tag to the bottom of the expanded detail tag associated with it?

Question

I am wanting to have the summary of a detail tag stick to the bottom of the text expanded when the summary is clicked. I can't seem to think of a way to get it there, any ideas? My test block is as follows:

<article>
  The Career Center will host its second “Starting Your Own Business” workshop on Tuesday, February 24, at 10 a.m.  Keli Morris from Northwest Enterprise Facilitation will conduct the workshop.
  <details>
    <summary style="text-align: right; outline: none;">
      Read More
    </summary>
    <p>
      <span style="color: #000000;">
        The Career Center will host its second “Starting Your Own Business” workshop on Tuesday, February 24, at 10 a.m.  Keli Morris from Northwest Enterprise Facilitation will conduct the workshop.  Anyone who would like to attend can call 660-582-8980 or email 
      </span>
      <a href="mailto:noneof@yourbusiness" target="_blank">
        emailGoesHere
      </a>
      <span style="color: #000000;">
        to get their name on the list.  Based upon client feedback, we have changed the day/time for our weekly Job Club workshops at the Career Center.  Starting in February, Job Club will meet Wednesday mornings at 9:30. For more information or to reserve a spot, please call the Career Center.
      </span>
    </p>
  </details>
</article>

i want to avoid Javascript, but that is a fallback by throwing out detail and summary tags and using onclick for 2 links, each hiding the other and showing or hiding the text. I would give more but i'm not sure how else to explain this, in essence i want summary to expand upwards when clicked.

Answer 1

<style>
summary{text-align: right; outline: none;}
details[open] summary{position:absolute;bottom:-10px;right:0%;}
article{position:relative;}
</style>

pure css fix to this. of course, simple solution. just took a heck of a lot of trial and error!