3-column-layout

main.css

TASKCARD {
  box-sizing: border-box;
  position: relative;
  padding-top: 17px;
}
TASK {
  border: 1px solid black;
  border-bottom: 0;
  visibility: -oxy-collapse-text;
}
TASK > * {
  visibility: visible;
}
TASKCARD,
TASK {
  display: block;
}
TASKCARD:after(1) {
  font-weight: bold;
  content: "Mech.";
  margin-top: -1px;
  text-align: center;
  width: 15%;
  display: inline-block;
  height: 100%;
  border-left: 1px solid black;
  position: absolute;
  top: 0;
  padding-top: 5px;
  box-sizing: border-box;
  right: 15%;
  height: 20px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0;
}
TASKCARD:after(2) {
  font-weight: bold;
  content: "Insp.";
  margin-top: -1px;
  text-align: center;
  width: 15%;
  display: inline-block;
  height: 100%;
  border-left: 1px solid black;
  position: absolute;
  top: 0;
  padding-top: 5px;
  box-sizing: border-box;
  right: 0;
  height: 20px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0;
  border-right: 1px solid black;
}
TASKCARD:after(3) {
  content: " ";
  margin-top: -1px;
  text-align: center;
  width: 15%;
  display: inline-block;
  height: 100%;
  border-left: 1px solid black;
  position: absolute;
  top: 0;
  padding-top: 5px;
  box-sizing: border-box;
  left: 0;
  width: 80%;
  height: 20px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  padding: 0;
}
TOPIC {
  visibility: -oxy-collapse-text;
}
SUBTASK {
  visibility: visible;
  border-top: 1px solid black;
  display: block;
  position: relative;
  padding-right: 30%;
  min-height: 30px;
}
SUBTASK:last-child {
  border-bottom: 1px solid black;
}
.small-column {
  margin-top: -1px;
  text-align: center;
  width: 15%;
  display: inline-block;
  height: 100%;
  border-left: 1px solid black;
  position: absolute;
  top: 0;
  padding-top: 5px;
  box-sizing: border-box;
}
SUBTASK:after(1) {
  content: oxy_combobox(edit, '@inspsignoff', editable, false, values, 'true, false', labels, 'Yes, No');
  right: 15%;
  margin-top: -1px;
  text-align: center;
  width: 15%;
  display: inline-block;
  height: 100%;
  border-left: 1px solid black;
  position: absolute;
  top: 0;
  padding-top: 5px;
  box-sizing: border-box;
}
SUBTASK:after(2) {
  content: oxy_combobox(edit, '@mechsignoff', editable, false, values, 'true, false', labels, 'Yes, No');
  right: 0;
  margin-top: -1px;
  text-align: center;
  width: 15%;
  display: inline-block;
  height: 100%;
  border-left: 1px solid black;
  position: absolute;
  top: 0;
  padding-top: 5px;
  box-sizing: border-box;
}

main.less

TASKCARD {
box-sizing: border-box;
    position: relative;
    padding-top:17px;
}
TASK {
    border: 1px solid black;
    border-bottom: 0;
    visibility: -oxy-collapse-text;
}
TASK > * {
    visibility: visible;
}
TASKCARD, TASK {
    display: block;
}

TASKCARD:after(1) {
    font-weight: bold;
    content: "Mech.";
    .small-column();
    right: 15%;
    height: 20px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
        padding: 0;

}

TASKCARD:after(2) {
    font-weight: bold;
    content: "Insp.";
    .small-column();
    right: 0;
    height: 20px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
        padding: 0;
        border-right: 1px solid black;
}
TASKCARD:after(3) {
    content: " ";
    .small-column();
    left: 0;
    width:80%;
    height: 20px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
        padding: 0;

}


TOPIC {
    visibility: -oxy-collapse-text;
}

SUBTASK {
    visibility: visible;
    border-top: 1px solid black;
    display: block;
    position: relative;
    padding-right: 30%;
    min-height: 30px;
}
SUBTASK:last-child {
    border-bottom: 1px solid black;
}
.small-column {
    margin-top: -1px;
    text-align: center;
    width: 15%;
    display: inline-block;
    height: 100%;
    border-left: 1px solid black;
    position: absolute;
        top: 0;
    padding-top: 5px;
    box-sizing: border-box;
}
SUBTASK:after(1) {
    content: oxy_combobox( 
            edit, '@inspsignoff',
            editable, false,
            values, 'true, false',
            labels, 'Yes, No');
        right: 15%;
    .small-column();
}

SUBTASK:after(2) {
    content: oxy_combobox( 
            edit, '@mechsignoff',
            editable, false,
            values, 'true, false',
            labels, 'Yes, No');
    right: 0;
    .small-column();
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="main.css"?>
<TASKCARD xml:lang="en-US" >
  <TASK >
    <TITLE>task title</TITLE>
    <PRETOPIC>
        <TITLE>Pre topic</TITLE>
        <PARA/>
    </PRETOPIC>
    <TOPIC>
      <TITLE>Topic</TITLE>
      <SUBTASK mechsignoff="true" inspsignoff="true">
        <NUMLIST>
          <NUMLITEM>
            <PARA>Last para</PARA>
          </NUMLITEM>
          <NUMLITEM>
            <PARA>Last para 2</PARA>
          </NUMLITEM>
        </NUMLIST>
        <NUMLIST>
          <NUMLITEM><PARA>Another paraasdasdasdasdasdasdasdaasdasdasdasdasd 1</PARA></NUMLITEM>
        </NUMLIST>
      </SUBTASK>
      <SUBTASK>
        <NUMLIST>
          <NUMLITEM>
            <PARA>Another para</PARA>
          </NUMLITEM>
        </NUMLIST>
      </SUBTASK>
    </TOPIC>
  </TASK>
</TASKCARD>