Minimum column width using fixed table layout

I have a problem I've been struggling with for a long while now. I'm trying to build a repeated table design where I have two rows with key value pairs and then another row with a single column which should span across both the above columns. Like this:

Key: Value

Comment

Key: Value

Comment

... and so forth.

Shortly, the idea is to build a message wall.

I want the first key to only take up minimum required width, no more, no less (except for the padding). And then I want the value to fill the rest of the space, but it should begin right after the value.

I have managed to get the key column to take up minimum width, but that was without using table-layout:fixed, but that brought me other problems (the table content going outside the parent div for example). So, I would like to have a fixed table layout as decribed, but with the content not flowing outside the parent div... I know I "fix" it using different CSS depending on the viewers screen size (setting a specific width for the first column) - but is that the best and only(?) solution?

Part of the code:

.divContainer {
  width: 500px;
    border: 2px solid red;
}
.topTable {
  table-layout: fixed;
    width: 100%;

}
td {
    width: auto; 
}
td.tableKey {
    padding-left: 7px;
    width: 1px;
    color: red;
    white-space: nowrap;

}
td.tableValue {
    text-align: left;
    max-width: 200px;
}    
td.tableComment {
       white-space: nowrap;
    word-wrap: break-word;
        white-space: pre-line;
}

<div class="divContainer">
    <table class="topTable">
        <tr>
            <td class="tableKey">Key:</td>
            <td class="tableValue">Value</td>
        </tr>
        <tr>
            <td class="tableKey">Key:</td>
            <td class="tableValue">Value</td>
        </tr>
        <tr>
            <td colspan="2" class="tableComment">This is a dummy messageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeee.</td>
        </tr>
    </table>
</div>

JsFiddle: https://jsfiddle.net/x87mwe4c/1/

Any help would be appreciated, been trying more or less everything. The code supplied is the "current" version - but tried much other stuff as well without any success.

Solution

It can work with a table. But most just use flex styling these days. An example:

.message-wall {
  margin: 0;
  padding: 0;
  max-width: 500px;
  list-style-type: none;
  
  border: 2px solid red;
}
.message-row {
  display: flex;
}

.comment {
  word-wrap: break-word;
  white-space: pre-line;
}
.tableKey {
  flex: 0 0 0;
  padding-right: 0.5em;
  
  color: red;
}
.tableValue {
  flex: 1 1 0;
}

<ul class="message-wall">
  <li id="message-1">
    <div class="message-row">
      <span class="tableKey">Key:</span>
      <span class="tableValue">Value</span>
    </div>
    <div class="message-row">
      <span class="tableKey">Key:</span>
      <span class="tableValue">Value</span>
    </div>
    <div class="comment">This is a dummy messageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeeeeemessageeeeeeeeeeeee</div>
  </li>
</ul>