Fluid Layout with Fluid Element Containing Fixed Elements

I have been having lots of issues trying to get this to work.

Currently: I have the parent element with display:block. I have the title and category in the same Block (with the title float: left, and the category float: right). Then the description below I have display: table. However I need the link to display all the way to the right under the category.

Then the curveball is, the fixed element is not always present, and it needs to fill the space where the element was.

Could anyone help me out, Fixed layouts seem like a dream to this.

Image attached describing above ^.

There’s always a better way than what I do, but here’s my quick attempt at this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
* {margin: 0; padding: 0;}
.wrap {background: #f7f7f7; padding: 10px; position: relative; overflow: hidden; margin-bottom: 40px;}
.fixed {width: 200px; height: 50px; background: #e7e7e7; float: left;}
.cat {position: absolute; top: 4px; right: 4px; font-size: 1.5em; color: gray;}
.content {overflow: hidden; padding-left: 20px;}
.link {float: right;}
</style>
</head>

<body>

<div class="wrap">
  <div class="fixed">
  </div>
  <div class="content">
    <h2>Title</h2>
    <p>Description, which can expand as required. <a class="link" href="#">[ link ]</a></p>
  </div>
  <p class="cat">Category</p>
</div>

<div class="wrap">
  <div class="content">
    <h2>Title</h2>
    <p>Description, which can expand as required. <a class="link" href="#">[ link ]</a></p>
  </div>
  <p class="cat">Category</p>
</div>

</body>
</html>