Positioning summary on the right-CodePudding

I would like to position the summary on the right as in the example. Using calculated margin-left is an option but not ideal.
Is there a better solution?

summary {
  padding: 0.2em 0.5em;
  width: 15em;
  background-color: #ddd;
  margin-left: calc(100% - 15em);
}

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

CodePudding user response：

position details relative then position summary absolute with right: 0; then float the p to right after you give a proper width.

I hope this is what you want.

* {
  border: 1px solid red;
}

details {
  position: relative;
}

summary {
  position: absolute;
  right: 0;
  width: 15em;
  background-color: #ddd;
}

p {
padding-top: 10px;
  width: 500px;
  float: right;
}

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
  </p>
</details>

CodePudding user response：

It seems that it can be done using the float: right property and applying clear on the p tag

summary{
  float: right;
  padding: 0.2em 0.5em;
  width: 15em;
  background-color: #ddd;
}
p{
  clear: right;
  padding: 1em 0;
}

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>