
I'm in the early stages of trying to put together a character sheet for a new game.
I have the start of a basic bio section in the first of 3 columns.
I would like to have the input fields either;
1) Extend to fill the remaining space in the row after the label
2) OR, aligned down the right hand edge of the column
html for the sheet currently looks like this (I have removed a section which sets up a series of tabs to try and simplify the example);
<div class="sheet-section-character">
<div class="sheet-3colrow">
<div class="sheet-col">
I'm a column
<div class="sheet-row">
Character Name: <input type="text" name="attr_CharacterName" style="width:70px"/>
</div>
<div class="sheet-row">
Year of Birth: <input type="number" name="attr_YearOfBirth" style="width:70px"/>
</div>
<div class="sheet-row">
Current Year: <input type="number" name="attr_CurrentYear" style="width:70px"/>
</div>
<div class="sheet-row">
Age: <input name="attr_Age" type="number" value="@{CurrentYear}-@{YearOfBirth}" style="width:70px;" disabled="disabled"/>
</div>
</div>
<div class="sheet-col">
So am I
</div>
<div class="sheet-col">
Me too
</div>
</div>
</div>
Any help would be greatly appreciated.