CSS element keeps going to new line - html

Question

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">#</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">#</div>
</div>
<div class="element">Achieved</div>
<div class="element">Talk (5)</div>
<div class="element">
<div class="word">Category</div>
<div class="word">Category</div>
</div>
</div>
</div>
<div class="timeline_entry">
<div class="entry">
<div class="element">
<div class="word">2015-09-23</div>
<div class="word">#</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">#</div>
</div>
<div class="element">Achieved</div>
<div class="element">Talk (5)</div>
<div class="element">
<div class="word">Category</div>
<div class="word">Category</div>
</div>
</div>
</div>
</div>

Answer 1

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">2013123 2013123 2013123 2013123 2013123 2013123 2013123</div>
</div>
<div class="item">
<div class="date">2015 09 14</div>
<div class="dates">2013123 2013123 2013123 2013123 2013123 2013123 2013123</div>
</div>
<div class="item">
<div class="date">2015 09 14</div>
<div class="dates">2013123 2013123 2013123 2013123 2013123 2013123 2013123</div>
</div>
<div class="item">
<div class="date">2015 09 14</div>
<div class="dates">2013123 2013123 2013123 2013123 2013123 2013123 2013123</div>
</div>
</div>

Answer 2

I was hoping to comment but I don't have enough rep points to do so, but would the below work?
JSFiddle: https://jsfiddle.net/4r295p0q/2/
This won't work if your class assignments aren't flexible because I changed the classes of the two DIV's with the text from .element (red border) to .post (blue border). From there, I gave the new .post class an pre-determined width percentage and float: right.