ボタンはボタンの末尾に表示できません

デザイナーから次のモックを与えて、ファイルを列に並べるようにしましょう.

各行をクリックする必要があります.また、別のイベントをトリガする各行に“他のオプション”のボタンがあります.したがって、2つのクリック可能な要素があります.
私はsemantic HTMlでより良いようにしようとしているので、私は最初に<button>を書いて、そのデフォルトのスタイリングを剥奪し、それを行にしました.それから、私は中でもう一つの<button>を入れ込みました.私が反応警告<button> cannot appear as a descendant of <button>を経験した時です.
私はHTMLボタンthere must be no interactive content descendantのためにそれを学びました.インタラクティブコンテンツはcontent that is specifically intended for user interactionです.
2つのオプションが残されています:

は非意味242479142をクリック可能要素

に変換する

は、別の

の上に1つの<div>を置くためにスタイリングを使用します
最初は完全に可能です.我々は単にアクセシビリティのためにいくつかのaria attributesを含める必要があります.divはこのように見えるかもしれません

<div tabindex="0" role="button">
  <div>file title</div>
  <button>other options</button>
</div>

他のオプションは少しトリッキーだったが、私によりよく感じました.私は、意味のHTMLのすべてのinsとoutを知っていると主張しません、しかし、私が言及するように、私はますます可能な限り正しいタグを使用しようとしています.

<div class='two-buttons'>
  <button class='row undo-button-styling'>
    <div>File 🤖 🎃</div>
  </button>
  <button class='other-options'>other options</button>
</div>

が発生する必要があるスタイルの変更(位置相対的な親、位置絶対子、ボタンのスタイルを元に戻す)の数がありますが、ここで完成したcodepenです.
https://codepen.io/devcon/pen/GRqGQxZ