Q:

Two divs float left, one float right in row

I'm trying to have 3 divs in one row. I've the code below and the biggest problem is, that second div doesn't end where third starts. The line also should be aligned vertically to center of texts. Result should look like this https://www.linksketch.com/XOfi
Texts in the first div may vary by length. So I can't specify it's width (or width of second one).

.activityType {
    color: #007b87;
    font-size: 20px;
    float: left;
    margin: 0 5px 0 0;
}

.lineActivities {
    height: 1px;
    margin-bottom: 10px;
    margin-left: 10px;
    background-color: #afbc16;
    opacity: .4;
    margin: 10px 10px 2px 0;
    overflow: hidden;
}

.activityDate {
    color: #007b87;
    font-size: 15px;
    float: right;
    margin-right: 25px;
    width: 140px;
}
<!-- First div with text aligned to left. -->
<div class="activityType">
    User created tiket
</div>

<!-- Second div with colored line going from 1. to 3. div (filling the gap). -->
<div class="lineActivities">
</div>

<!-- Third div with text. -->
<div class="activityDate">
    23. 02. 2015 01:31:33
</div>

A:

You can do this without an intervening third div if you wrap them items into one div...then use a pseudo-element..like so:

* {
  box-sizing: border-box;
}

.activity {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.activity:after {
  content: '';
  border-bottom: dotted 2px tomato;
  display: block;
  overflow: hidden;
  height: 1.5em; /* controls position of line vertically */
}

.activityType {
  color: #007b87;
  float: left;
  margin-right: 1em;
}

.activityDate {
  color: #007b87;
  float: right;
  margin-left: 1em;
}
<div class="activity">
  <p class="activityType">User created ticket</p>
  <p class="activityDate">23. 02. 2015 01:31:33</p>
</div>

<div class="activity">
  <p class="activityType">Lorem ipsum dolor sit amet.</p>
  <p class="activityDate">23. 02. 2015 01:31:33</p>
</div>

