How do I make td occupy 50% of tr

Question

I have the following snippet. It has one problem - the Enter your passcode: td occupies too much space, and looks ugly.

I've tried to set width:50% to that, but it didn't work out.

What I'm trying to achieve is that the input field goes line in line to the Expertise Organization button.

How can I do that?

Thanks in advance.

.prettyEGRZButton {
  width: 100%; 
  padding: 20px; 
  text-align: center; 
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px; 
  cursor: pointer;
  border-radius: 12px; 
  border: 1px solid #05788d;
      color: #05788d;
  background: transparent;
}

.prettyEGRZButtonActive {
 color: white;
 background: #05788d;
}

<div id="view:_id1:egrzFinishAuthPopUp" class="egrzFinishAuthPopUp">
  <div id="view:_id1:organizationsRepeat">
  </div>
  <div id="view:_id1:rolesRepeat">
  </div>
  <table id="view:_id1:egrzFinishAuthPopUpTable" role="presentation">
    <tbody>
      <tr align="center">
        <td>
          <span class="xspTextLabel">To proceed, please authorize</span>
        </td>
      </tr>
      <tr align="center">
        <td>
          <span class="xspTextLabel">Authorize as natural person</span>
        </td>
      </tr>
      <tr id="view:_id1:authAsPersonTr">
        <td id="view:_id1:authAsPersonTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:authAsPersonButton" id="view:_id1:authAsPersonButton">John Doe</button>
        </td>
      </tr>
      <tr align="center">
        <td>
          <span class="xspTextLabel">Authorize as organization</span>
        </td>
      </tr>
      <tr id="view:_id1:organizationsRepeat:0:authAsOrgTr">
        <td id="view:_id1:organizationsRepeat:0:authAsOrgTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:organizationsRepeat:0:authAsOrgButton" id="view:_id1:organizationsRepeat:0:authAsOrgButton">Company 1</button>
        </td>
      </tr>
      <tr id="view:_id1:organizationsRepeat:1:authAsOrgTr">
        <td id="view:_id1:organizationsRepeat:1:authAsOrgTd">
          <button class="prettyEGRZButton prettyEGRZButtonActive" type="button" name="view:_id1:organizationsRepeat:1:authAsOrgButton" id="view:_id1:organizationsRepeat:1:authAsOrgButton">Company 2</button>
        </td>
      </tr>
      <tr id="view:_id1:rolesRepeat:0:roleTr">
        <td id="view:_id1:rolesRepeat:0:roleTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:0:roleButton" id="view:_id1:rolesRepeat:0:roleButton">Government Organization</button>
        </td>
      </tr>
      <tr id="view:_id1:rolesRepeat:1:roleTr">
        <td id="view:_id1:rolesRepeat:1:roleTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:1:roleButton" id="view:_id1:rolesRepeat:1:roleButton">Expertise Organization</button>
        </td>
      </tr>
      <tr>
        <td>
          <span class="xspTextComputedField">Enter your passcode:</span>
        </td>
        <td>
          <input id="view:_id1:inputText1" type="password" name="view:_id1:inputText1" value="" class="xspInputFieldSecret">
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

Your first couple tr are one td only. So the bottom tr need to honor it. You can use two rows to make it align.

.prettyEGRZButton
 {
  width: 100%; 
  padding: 20px; 
  text-align: center; 
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px; 
  cursor: pointer;
  border-radius: 12px; 
  border: 1px solid #05788d;
  
  color: #05788d;
  background: transparent; 
 }
 
 .prettyEGRZButtonActive
 { 
  color: white;
  background: #05788d;
 }

.xspInputFieldSecret{
width:100%;
}

<div id="view:_id1:egrzFinishAuthPopUp" class="egrzFinishAuthPopUp"><div id="view:_id1:organizationsRepeat">
</div><div id="view:_id1:rolesRepeat">
</div><table id="view:_id1:egrzFinishAuthPopUpTable" role="presentation"><tbody><tr align="center"><td><span class="xspTextLabel">To proceed, please authorize</span></td>
</tr>
<tr align="center"><td><span class="xspTextLabel">Authorize as natural person</span></td>
</tr>
<tr id="view:_id1:authAsPersonTr"><td id="view:_id1:authAsPersonTd"><button class="prettyEGRZButton" type="button" name="view:_id1:authAsPersonButton" id="view:_id1:authAsPersonButton">John Doe</button></td>
</tr>
<tr align="center"><td><span class="xspTextLabel">Authorize as organization</span></td>
</tr>
<tr id="view:_id1:organizationsRepeat:0:authAsOrgTr"><td id="view:_id1:organizationsRepeat:0:authAsOrgTd"><button class="prettyEGRZButton" type="button" name="view:_id1:organizationsRepeat:0:authAsOrgButton" id="view:_id1:organizationsRepeat:0:authAsOrgButton">Company 1</button></td>
</tr>
<tr id="view:_id1:organizationsRepeat:1:authAsOrgTr"><td id="view:_id1:organizationsRepeat:1:authAsOrgTd"><button class="prettyEGRZButton prettyEGRZButtonActive" type="button" name="view:_id1:organizationsRepeat:1:authAsOrgButton" id="view:_id1:organizationsRepeat:1:authAsOrgButton">Company 2</button></td>
</tr>

<tr id="view:_id1:rolesRepeat:0:roleTr"><td id="view:_id1:rolesRepeat:0:roleTd"><button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:0:roleButton" id="view:_id1:rolesRepeat:0:roleButton">Government Organization</button></td>
</tr>
<tr id="view:_id1:rolesRepeat:1:roleTr"><td id="view:_id1:rolesRepeat:1:roleTd"><button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:1:roleButton" id="view:_id1:rolesRepeat:1:roleButton">Expertise Organization</button></td>
</tr>


<tr><td><span class="xspTextComputedField">Enter your passcode:</span></td>
</tr><tr>
<td><input id="view:_id1:inputText1" type="password" name="view:_id1:inputText1" value="" class="xspInputFieldSecret"></td>
</tr>
</tbody></table>
</div>