placing html element inline in responsive layout method - html

Question

I want to place image, arrow , title and input textbox in particular way as in image.
Puting stlye tag in hr or td is not good practice, right? It did not help even
To keep space between tr only <br/>is option or any better way is possible?
How to keep space between arrow, title, textbox without using &nbsp
fiddle : http://jsfiddle.net/karimkhan/u7AjH/2/
I want to display content like this:
css:
.content > .container {height: 100%;}
.img-container1 { float:left; height:80% !important; width:40%}

Answer 1

http://jsfiddle.net/u7AjH/4/
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded" />
</div>
<div class="col-xs-6 col-md-6">
<div class="row">
<div class="col-md-12">
<div class="col-xs-4 col-md-4">
=>
</div>
<div class="col-xs-4 col-md-4">
<input type="text" class="form-control"/>
</div>
<div class="col-xs-4 col-md-4">
Text Here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-xs-4 col-md-4">
=>
</div>
<div class="col-xs-4 col-md-4" >
<textarea style="height:200px" type="text" class="form-control"></textarea>
</div>
<div class="col-xs-4 col-md-4">
Text Here
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-xs-4 col-md-4">
=>
</div>
<div class="col-xs-4 col-md-4">
<input type="text" class="form-control"/>
</div>
<div class="col-xs-4 col-md-4">
Text Here
</div>
</div>
</div>
</div>
</div>
</div>
Although its not that good because I made it just now but i think it can help you.
You may use the grid system of bootstap in order for you to make a responsive grid.
Take a look with this documentation and you will learn more about bootstrap.
http://getbootstrap.com/css/#grid
I hope it can help you.

Answer 2

you can achieve by adding margin as per your requirement.
try this:
.container div{
margin-right:20px;
}

Answer 3

HTML:
<div class="content">
<div class="container">
<div class="img-container1">
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded">
</div>
<div class="text-container">
<table>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<textarea name="textArea"></textarea>
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
<tr>
<td>
Arrow
</td>
<td>
<input type="text" name="title" />
</td>
<td>Title</td>
</tr>
</table>
</div>
</div>
</div>
CSS
.content > .container {height: 100%;}
.img-container1 { float:left; height:80% !important; width:40%}
.img-container1 img {max-width: 100%;}
.text-container {float: left; height: 80% !important; width: 60%}
.text-container table tr{height: 50px;}
.text-container table tr td:first-child{width: 10%;text-align: center;}
.text-container table tr td{width: 40%;}
.text-container table tr td:last-child{width: 10%;text-align: center;}
.text-container table tr td input{width: 100%;}
.text-container table tr td textarea{width: 100%;height: 200px;resize: none;}
Working Example
http://jsfiddle.net/3vSyL/