Bootstrap button beside paragraph (responsive) - html

Question

I'd like to have a button which responsively stays beside a paragraph, without the paragraph text wrapping around the button.
For example, here is the current code I am using:
<div class="myclass">
Button
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
This produces the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
What I want, is the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
I want it to remain this way no matter what the screen resolution is.
How would I accomplish this?

Answer 1

You can use Bootstraps Media Object to do this.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="media">
<div class="media-left"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-midle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<hr>

Answer 2

Try keeping the button in different div and the paragraph in another one.

Answer 3

You tagged bootstrap so you can put the button and text in separate divs with column width settings. The number after the device width is divided by 12 for the width percentage. You can also add multiple device widths to improve responsiveness.
<div class="row myclass">
<div class="col-xs-4">
Button
</div>
<div class="col-xs-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
http://jsfiddle.net/zsenq6h6/

Answer 4

Ended up just using display: table and display table-cell for this. i.e.:
HTML:
<div class="filters">
<div class="cell">
Button
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tempus ante sit amet hendrerit. Nunc vel nunc id nibh rhoncus posuere. Nunc tincidunt nisi nec diam lacinia commodo. Quisque erat nisi, vulputate eget lacinia finibus, aliquet quis est. Vivamus at risus egestas, interdum erat ut, condimentum dui.
</div>
</div>
CSS:
.filters {
display: table;
}
.filters .cell {
display: table-cell;
vertical-align: top;
}

Answer 5

bootstrap is the best way to do this effect. if you don't want to use bootstrap then you can use the following code.
html :
<div class="myclass">
Button
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
css :
a {
width:10%;
display:inline-block;
vertical-align:top;
}
p{
width:70%;
display:inline-block;
margin-top:0 !important;
}
#media screen and (max-width:500px){
a {
margin-right:20px;
}
}
}
http://jsfiddle.net/souraj/d0u61xpg/
media query part is required when the resolution will be below 500px . otherwise there is no need to use it.