Rule Keep in minds to design your HTML at first according to HTML5 semantics.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

UX/UI mockups must not lead the markup.
There are more than 100 available HTML5 elements. Please, choose wisely your elements.

http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf

Why Semantics give a meaning to your content. If you read HTML document, you must understand what is rendered without style.

Rule Avoid using input["button"], input["submit"] and role="button" if it's not needed. Prefer <button>.

Why input are only designed for forms, use <button> for simplicity.

Rule Avoid using onClick handler on others elements than clickable ones.

If you force the cursor with cursor: pointer or if you get eslint-plugin-jsx-a11y warnings, you probably do something wrong!

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md

Why Managing click on non clickable elements implies to add extra css to manage cursor shape and bring accessibility issues.

Rule You should use Definition List to display keys and their values.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

<dl>
  <dt>Filename</dt>
  <dd>Lorem ipsum dolor</dd>
  <dt>Authors</dt>
  <dd>Name 1</dd>
  <dd>Name 2</dd>
</dl>

Why HTML semantic

Rule Inline editing should be within <form>.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Don't miss <label>, aria-label="" or aria-labelledBy="" for inline inputs.

Why Do you imagine <td> without <table> ?