Position Divs in columns when using directives in angularjs

Question

I know this question has been asked 100 different ways but i have not yet found an answer that works for me. Essentially i have 2 elements nested inside a wrapper , One of those inner elements is essentially just a setup for an angular directive that pops an element into DOM. It looks like this

<div class="panel-body" id="swfStage" style="width:320px; height:240px;background-color: #355E95;overflow: auto;white-space:nowrap  ">
    <div class="swfWrapper" style="width: 80%;display: inline-block;">
        <div tf-swf class="tf-container" tf-src="swfs/thin.swf" tf-min-version="11.0.0"></div>
    </div>
    <div class="chatWrapper" style=style="width: 19%;display: inline-block;">It works</div>
</div> 

The goal here is that the outer most is a container for the two main inner 's ... I want those divs to be side by side

What i have here is giving me the two inner divs on top of each other.

Answer 1

You just have a typo in your html:

style=style=

Should just be

style=

Answer 2

There are a few ways that you could go about this while maintaining the structure of your HTML (but taking out the inline style definitions for cleanliness).

HTML

<div class="panel-body" id="swfStage">
    <div class="swfWrapper">
        <div tf-swf class="tf-container" tf-src="swfs/thin.swf" tf-min-version="11.0.0"></div>
    </div>
    <div class="chatWrapper">It works</div>
</div>

Option 1: CSS for Table Styling Option

.panel-body {
    width:320px;
    height:240px;
    background-color: #355E95;
    overflow: auto
    display: table;
}

.swfWrapper {
    width: 80%;
    display: table-cell;
    background-color: red;
}

.chatWrapper {
    width: 19%;
    display: table-cell;
    background-color: green;
}

Option 2: CSS for Positioning Option

.panel-body {
    width:320px;
    height:240px;
    background-color: #355E95;
    overflow: auto;
    position: relative;
}

.swfWrapper {
    width: 80%;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}

.chatWrapper {
    width: 20%;
    height: 100%;
    background-color: green;
    position: absolute;
    top: 0;
    right: 0;
}

Personally, I prefer the second option.

Answer 3

You can use CSS3 flex (fiddle):

.panel-body {
    width: 320px;
    height: 240px;
    background-color: #355e95;
    overflow: auto;
    white-space: nowrap;
    display: flex;
}

.swfWrapper {
    flex: 1 0 80%;
}

.chatWrapper {
    flex: 1 0 20%;
    overflow: hidden;
}