I'm currently working on aligning these elements one below the other, with one on the left and the other on the right: Here is my code snippet:
Check out the fiddle here: https://jsfiddle.net/ak9hxfpt/2/
I want to position the test2 to the right side of the test1 div, with it appearing below the test1 div.
The desired outcome should look like this: https://jsfiddle.net/ak9hxfpt/3/
However, when I apply float: right to all the divs, the layout gets messed up as seen in this fiddle:
https://jsfiddle.net/ak9hxfpt/4/
The "remove link" content should be displayed below the "some content" for each div. Do you have any suggestions on how to achieve this?
.test2 {
margin-bottom: 30px;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>