align two divs based on length of first one - html

Question

I need to align the second div based on the length of first one. The first div contains some content like article title and user details. The second div contains rating for that title. I have assigned float property for both divs. This works fine if the content inside first div is not too long. But if the title is too long then the title overlaps the rating.
Please let me know if there is some way to fix it.
<div id="result-1095" class="selectedResource">
<div style="float:left;width:67%;">
<p>
<a class="details" id="resource-1095" href="#id:resource1095">
TestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitletest tests tests test testst
</a>
</p>
<p class="articleDetails"></p>
<p class="userDetails">Added by username</p>
</div>
<div style="float:right;" class="yui3-widget component rating" id="ResourceRating-1095">
<span class="rating-content">
<span class="rating-label"></span>
<a onclick="return false;" title="one" class="icon-star-empty"></a>
<a onclick="return false;" title="two" class="icon-star-empty"></a>
<a onclick="return false;" title="three" class="icon-star-empty"></a>
<a onclick="return false;" title="four" class="icon-star-empty"></a>
<a onclick="return false;" title="five" class="icon-star-empty"></a>
</span></div>
<p style="clear:both"></p>
</div>
I have added a fiddle snippet. Somehow yui rating is not visible in fiddle (though i have loaded yui on frameworks ) http://jsfiddle.net/wkj926rq/

Answer 1

You can use word-wrap: break-word for class details
.details{
word-wrap: break-word
}
http://www.css3.com/css-word-wrap/
on other way changing mark up-
You can use display:inline-block; for your divs instead of float;
<div>
<div class="first inlineblock">
</div>
<div class="second inlineblock">
</div>
<div>
css
.inlineblock
{
display:inline-block;
vertical-align:top;
}

Answer 2

Please add the same class on markup ex: .same-width and set width property

Answer 3

You could use flexboxes setting container to:
.wrapper , #result-1095{
display: flex;
flex-flow: nowrap;
}
PS: if you paste a fiddle(snippet) it's more testable

Answer 4

Maybe you should try giving width to the the title (class="details").