Add content to top-right area of rows - html

Question

After various attempts with pull-right, float style and row-fluid, I decided to ask here:
What I try to do is simply to have a Map appear to the right of a set of rows.
Here is how it looks right now:
Which is not too far from what I want, but the name row plus any following rows should appear below each other.
Here is how my HTML looks:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I bet this is a typical scenario but I have failed to find an example.
Other attempts that makes name appear below number, moves it below the map.
Is it perhaps possible to avoid having the map take up vertical space in the Bootstrap grid system?

Answer 1

You should use a 2-col layout :
Left column for your inputs
Right column for your Google Map
Plus, remember to put your .input-group inside a .form-group to get paddings/margins set to Bootstrap default values.
Here's a working example (click on Full page for a better view):
body {
padding-top: 25px;
}
.map {
width: 100%;
height: 150px;
background: tomato;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel heading</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</form>
</div>
<div class="col-xs-6">
<div class="map"></div>
</div>
</div>
</div>
</div>
</div>