Q:

CSS element keeps going to new line

I want to keep the text block always on the first line, and if it needs multiple lines, then those lines should always get created beneath the first line of text.
The objective is that you only see dates on the left part of the page.
what is happening:
enter image description here
what should be happening:
enter image description here

/* Magic */
* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    margin-left:20px;
}

/* MAIN STRUCTURE */
.page {
    margin: 20px 20px 20px 20px;
    font-size: 1.1rem;
}

#header {
    width: 100%;
    z-index: 1;
    display: inline-block;
}

.section {
    margin-top: 15px;
    display: inline-block;
    width: 100%;
}

/* Header */
#title {
    float: left;
    font-size: 1.3rem;
}

#meta {
    float: right;
}

/* section */
.timeline_entry {
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
}

.entry {
    display: inline-block;
    width: 100%;
}

#identity {

}

#current {

}

#actions {

}

#stats {

}

#listing {

}

/* entry */
.element {
    display: inline-block;
    margin-right: 0.8rem;
}

.word {
    display: inline-block;
}

#editing{
    display: inline-block;
    text-align: left;
    float: right;
}

#proposal_status {

}

#proposal_text {

}

/* header */
#user_actions{

}
    <div class="section" id="listing">
        <div class="timeline_entry">
            <div class="entry">
                <div class="element">
                    <div class="word">2015-09-23</div>
                    <div class="word"><a href="">#</a></div>
                </div>
                <div class="element">This is a long text which is going to the second line because its so big you know? more text, moarr</div>
            </div>
            <div class="entry">
                <div class="element">
                    <div class="word">2015-09-23</div>
                    <div class="word"><a href="">#</a></div>
                </div>
                <div class="element">Achieved</div>
                <div class="element"><a href="">Talk (5)</a></div>
                <div class="element">
                    <div class="word"><a href="">Category</a></div>
                    <div class="word"><a href="">Category</a></div>
                </div>
            </div>
        </div>
        <div class="timeline_entry">
            <div class="entry">
                <div class="element">
                    <div class="word">2015-09-23</div>
                    <div class="word"><a href="">#</a></div>
                </div>
                <div class="element">This text stays where it should</div>
            </div>
            <div class="entry">
                <div class="element">
                    <div class="word">2015-09-23</div>
                    <div class="word"><a href="">#</a></div>
                </div>
                <div class="element">Achieved</div>
                <div class="element"><a href="">Talk (5)</a></div>
                <div class="element">
                    <div class="word"><a href="">Category</a></div>
                    <div class="word"><a href="">Category</a></div>
                </div>
            </div>
        </div>

    </div>

A:

you could try playing around with HTMLs much underloved "Deffinition List" <dl>
Alternatively, here's a table-like layout:

.list-group {
 display:table;
 width:100%;
 max-width:500px;
}
.item {
 display:table-row;
}
.date {
 display:table-cell;
 width:30%;
 padding:10px;
 vertical-align:top;
 text-align:right;
}
.dates {
 display:table-cell;
 width:70%;
 padding:10px;
 vertical-align:top;
}
<div class="list-group">
  <div class="item">
    <div class="date">2015 09 14</div>
    <div class="dates"><a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a></div>
  </div>
  <div class="item">
    <div class="date">2015 09 14</div>
    <div class="dates"><a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a></div>
  </div>
  <div class="item">
    <div class="date">2015 09 14</div>
    <div class="dates"><a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a></div>
  </div>
  <div class="item">
    <div class="date">2015 09 14</div>
    <div class="dates"><a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a> <a href="#">2013123</a></div>
  </div>
</div>

