Auto expand TD according to contained DIV

Question

I have a 3x3 html table. In the second row the first and third column contain div's that are rotated to show content vertically. Other cells show content normally. These vertical divs overflow from TD height. I want to expand TD height dynamically based on Div height(width vertically).

Here is the code from fiddle

UPDATED

HTML

<table>

  <tr>
    <td>
      <div>
        ?
      </div>
    </td>
    <td>
      <div>
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td>
      <div>
        ?
      </div>
    </td>
  </tr>

  <tr>
    <td class="expand">
      <div class="vertical">
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td>
      <div>
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td class="expand">
      <div class="hw vertical">
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
  </tr>

  <tr>
    <td>
      <div>
        ?
      </div>
    </td>
    <td>
      <div>
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td>
      <div>
        ?
      </div>
    </td>
  </tr>

</table>

CSS

table td {
  border: 2px solid lightgray;
}

.hw {
  width: 208px !important;
  height: 20px;
}

.expand {
  white-space: pre;
}

.vertical {
  /* writing-mode: vertical-rl; */
  transform: rotate(90deg);
}

Thanks in advance.

Answer 1

Use white-space: pre; in td.

edits

check this updated snippet. I used 'writing-mode: tb-rl' to make text vertical.

Check Can I Use for broswer support

table td {
  border: 2px solid lightgray;
  white-space:nowrap

  }
.vertical {
  writing-mode: tb-rl;  
}

<table>

<tr>
  <td>
    <div>
      ?
    </div>
  </td>
  <td>
    <div>
      lorem ipsum
    </div>
  </td>
  <td>
    <div>
      ?
    </div>
  </td>
</tr>

<tr>
  <td>
    <div class="vertical" >
      vertical text  
    </div>
  </td>
  <td>
    <div>
    lorem ipsum
    </div>
  </td>
  <td>
    <div class="vertical">
    vertical text
    </div>
  </td>
</tr>

<tr>
  <td>
    <div>
      ?
    </div>
  </td>
  <td>
    <div>
      lorem ipsum
    </div>
  </td>
  <td>
    <div>
      ?
    </div>
  </td>
</tr>

</table>