How to position text at end of previous block of text?

Question

We are using a CMS which limits my ability to edit the HTML. I have a paragraph of text, followed by a link:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore.

Click here

Our designer would prefer to have the "Click here" link appear directly at the end of the paragraph of text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore. Click here

Is it possible to position the link with CSS such that it always appears at the end of the preceding paragraph? Here is the HTML produced by our CMS:

<div class="item summary">
    <div class="content">
        <p>
            Lorem ipsum...
        </p>
    </div>
</div>  
<div class="item link">
    <div class="content">
        <a href="http://www.example.com">Click here</a>
    </div>
</div>

Answer 1

For this to work, basically all your elements (div, p, a) need to be inline or inline-block elements.

http://jsfiddle.net/mkeyh93f/

div.item{
    display: inline;
}

div.item p, div.item div, div.item a{
    display: inline;
}

Just make sure you also don't have any default padding and margins on your elements. I would also suggest wrapping it all up in a div or article container with display: block;

Answer 2

You can set

float: right;

in your item link. Or use a table layout.

Tip: Set no blanks in your css class names ("itemLink").

Answer 3

If possible change the div to span or in the css, add

.item, .item.content, .item.content p,
.item.summary .item.link {display: inline;}
.item.summary item.link .content {display: inline;}

This would change the behavior of the div element.m which is sort of anti-intuitive. DIVs are semantically divisions and so, making a div act like a span is not recommended. Use it only as a last resort

Answer 4

There is one way of doing it using jquery i hope this will some wat help you since we cannot adjust using css. We can use it via jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".link").each(function(){
       var a=$(this).children(".content").html();
$(this).siblings(".summary").children(".content").children("p").append(a);
    });
    $(".item.link").remove();
});
</script>

And No changes in html content try this and let me know if this function works or not

Answer 5

div p{
float: Right;
}

or

div p{
Display: inline;
}

these both worked for me