Align div next to two other grouped div's

Question

How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?

Here's my code: HTML

<div class="job_board">

  <div class="job_box">

    <span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
      <div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
      <div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
    </span>

      <div class="slide_button"></div>

  </div>

</div>

CSS

.light {
  font-weight: normal;
}

.job_box {
  width: 100%;
  padding: 30px 50px;
  background-color: #082730;
  color: white;
  text-align: center;
  display: table;
}

.working_field {
  font-weight: bold;
  margin: 0;
  font-size: 0.8em;
}

span.job_title_working_field {
  table-cell;
}

.slide_button {
  position: absolute;
  width: 50px;
  height: 100%;
  background: yellow;
  display: table-cell;
}

JSFiddle

Answer 1

Since .slide_button is within an element, you would simply relatively position the parent element:

.job_box {
    position: relative;
    width: 100%;
    padding: 30px 50px;
    background-color: #082730;
    color: white;
    text-align: center;
    display: table;
    font-family: "Helvetica", sans-serif;
}

And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.

UPDATED EXAMPLE HERE

.slide_button {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background: yellow;
}

If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.

UPDATED EXAMPLE HERE

.job_box {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}