Positioning Flag Note

by pmamode

HTML

<table>
  <tr>
    <td class="leftcell">
      <div style="position:relative; height: 100%; padding: 14px;">
        XX
        <div style="position:absolute; top:-6px; left:20px;">
          <svg width="41px" height="41px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <polygon style="fill:none;stroke:#000000;stroke-width:5px" points="183.138438763306,172 16.8615612366939,172 100,28" />
          </svg>
        </div>
      </div>
    </td>
    <td class="rightcell">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
    </td>
  </tr>
  <tr>
    <td class="leftcell">
      <div style="position:relative; height: 100%; padding: 14px;">
        1.
      </div>
    </td>
    <td class="rightcell">
      REFERENCE DRAWING:
      <br>
      <br>
      <div style="position:relative; width: 120px; left:44px; background-color: blue; ">04646001</div>
      <div style="position:absolute; width:200px; left:290px; height: 100%;">PLANT VENT RADIATION MONITORING SYSTEM, PIGGG</div>
      <br><span style="position:relative; left:44px;">04646010</span> <span style="position:relative; left:90px;">BLOCK DIAGRAM, PLANT VENT RADIATION MONITORING SYSTEM, PIGGG</span>
      <br><span style="position:relative; left:44px;">04646020</span> <span style="position:relative; left:90px;">CUSTOMER CONNECTION DIAGRAM, PLANT VENT RADIATION MONITORING SYSTEM, PIGGG</span>
      <br>
    </td>
  </tr>
  <tr>
    <td>
      <div class="table">
        <div class="cell" style="background-color:#87CEFA;">
          <div style="position:relative; height: 100%; width:100%; ">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            <div style="position:absolute; top:0; left:0; background: yellow;">
              O
            </div>
          </div>
        </div>
      </div>
    </td>
    <td>
      <div class="cell">
        <div class="table"...

CSS

body {
  font-family: 'Inconsolata', sans-serif;
  font-size: 16px;
}

table,
tr {
  height: 100%;
  border-collapse: collapse;
  width: 100%;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

td {
  border: 1px solid #ddd;
}

.leftcell {
  width: 80px;
  text-align: center;
}

.rightcell {
  padding-top: 14px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}

.table {
  display: table;
}

.cell {
  display: table-cell;
}

.table,
.cell {
  height: 100%;
}