JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <table class="table">
    <thead>
      <tr>
        <td>key</td>
        <td>value</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <div class="content">
            <pre>
              <code>
                ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容ものすごく複雑な内容
              </code>
            </pre>
          </div>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>value 2</td>
      </tr>
    </tbody>
  </table>
 </div>

CSS

.wrap {
  width: 100%;
}.table {
  width: 100%;
  table-layout: fixed; // fixedにすることで、常に親のwidthにフィットする。コメントアウトしてみてください
}
.table td,
.table th {
  border: 1px solid #DFDFDF;
  padding: 1rem;
}
.table tr > td:first-child,
.table tr > th:first-child{
  width: 30%; // 最初のカラムだけ30%のwidthを確保
}
div.content {
  width: 100%;
}
div.content pre {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: auto;
}