merge three cells in table - or using div

I need generating labels for plants, and I want the plant code in the lower left corner, and the species distribution occupy the remaining area. I am doing this using html, and css.

My design has a smaller element S on top of a larger element B, the two of them aligned at the bottom.

+-----------------------------+
|      B                      |
+--------------+              |
|      S       |              |
+--------------+--------------+

doing it aligned at the top is what you get naturally, but this is definitely not what I need...

+--------------+--------------+
|      S       |              |
+--------------+              |
|      B                      |
+-----------------------------+

I think I first must place object S, then make B occupy the space left.

I have no clue. the code I'm trying to adapt uses tables, but I think I cannot merge cells in L form, or can I? I have tried with position-absolute, but then the space reserved for object S stays where I do not want the object, and the content of S is displaced to where I want S, but no space is reserved for it there. (see https://stackoverflow.com/a/33058256/78912 below)

I am adding the whole code, which I think is rather overkill, but here it comes.

.label {
    border: 1px solid black;
    padding: 2px;
    margin: 1px;
    width: 78mm;
    height: 45mm;
    float: left;
    /*page-break-inside: avoid;*/
    page-break-before: auto;
    page-break-after: auto;
    orphans: 100;
    widows: 100;
    overflow: hidden;
    box-sizing: border-box;
  }
.family {
    /* border: 1px solid red; */
    text-align: center;
    font: normal bold 14pt Arial, sans;
    margin-top: 3mm;
    height: 1.2em;
    width: 100%;
  }
.name {
    /* border: 1px solid red; */
    text-align: center;
    margin-top: 1mm;
    font: normal normal 14pt Arial, sans;
    height: 18mm;
    width: 100%;
    vertical-align: middle;
}
.species {
    /* border: 1px solid blue; */
    text-align: center;
    font: normal normal 14pt Arial, sans;
    width: 100%;
    margin-bottom: .5em;
  }
.vernacular {
    /* border: 1px solid green; */
    text-align: center;
    font: normal bold 14pt Arial, sans;
    width: 100%;
    margin-bottom: .5em;
  }

.code {
    /* border: 1px solid orange; */
    font: normal normal 12pt serif;    
    vertical-align: bottom;
    text-align: left;
    white-space: nowrap;
  }
.distribution {
    /* border: 1px solid blue; */
    font: normal normal 11pt serif; 
    vertical-align: bottom;
    text-align: right;
    float: right;
  }

.code2 {
    /* border: 1px solid orange; */
    font: normal normal 12pt serif;    
    text-align: left;
    float: left;
    white-space: nowrap;
    margin: 0 9pt 0 0;
    float: left;
  }

  <table class="label">
    <tbody><tr>
      <td colspan="2" class="family">Myrtaceae</td>
    </tr>
    <tr>
      <td colspan="2" class="name">
	<div class="species">
	  <i>Eugenia</i> <i>uniflora</i>
	</div>
	<div class="vernacular">
	  
	</div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
<div>
<div class="distribution">Northern South America, Northern Argentina, Panamá, Costa Rica, Francia</div>
<div class="code2"><div>0G 1968GR01496.1</div></div>
</div>
      </td>
    </tr>
  </tbody>
</table>

more compactly, just the bottom S and B elements, where I do not manage to have the bottom baseline of the two aligned, nor to convince B occupy at least a bit of space at the same level as S.

.label {
border: 1px solid black;
padding: 2px;
margin: 1px;
width: 78mm;
height: 45mm;
float: left;
/*page-break-inside: avoid;*/
page-break-before: auto;
page-break-after: auto;
orphans: 100;
widows: 100;
overflow: hidden;
  }
.distribution {
/* border: 1px solid blue; */
font: normal normal 11pt serif; 
vertical-align: bottom;
text-align: right;
float: right;
  }

.code2 {
/* border: 1px solid orange; */
font: normal normal 12pt serif;    
text-align: left;
float: left;
white-space: nowrap;
margin: 4pt 9pt 0 0;
display:inline-block;
vertical-align:bottom;
  }

  <div class="label">
<p>above we have family, species, vernacular name...</p>
<div class="distribution">Northern South America, Northern Argentina, Panamá, Costa Rica, Costa Rica, Costa Rica, Costa Rica, Costa <div class="code2">0G 1968GR01496.1</div>Rica</div>
</div>

Solution

This might do it for you

#parent {
  width: 350px;
  height: 150px;
  overflow: hidden;
  background-color: #ddd;
}

#parent:before {
  content: '';
  height: 65%;
  float: left;
}

#pusher {
  width: 160px;
  height: 35%;
  float: left;
  clear: left;
  background-color: #aaa;
}

<div id="parent">
  
  <div id="pusher">0G 1968GR01496.1</div>
  
  <div>
      <div class="species">
          <i>Eugenia</i> <i>uniflora</i>      
      </div>
      <div class="distribution">
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
        Northern South America, Northern Argentina, Panamá, Costa Rica,
      </div>
  </div>
</div>

Src: Can you float a div in the lower right of its parent div and have text wrap around it?

Furter reading using the new CSS Shapes (bad browser support though) http://www.html5rocks.com/en/tutorials/shapes/getting-started/

Additional note:

Using a canvas element and calculate/draw text might be another option, where you can put stuff exactly where you want.

Further reading here:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text