https://i.sstatic.net/kZHF2.png
<form class="container">
<div class="row">
<div class="col-md-5">
<h2>Template</h2>
<textarea id="template" value={this.state.value1} placeholder=" Hello {{name}}! {% if test -%} How are you?{%- endif %}" onChange={this.handleChange1.bind(this)}/>
</div>
<div class="col-md-5 align-right">
<h2>Render</h2>
<div id="render"> {this.state.loading || !this.state.data ? < div id="render"></div> : <div>{this.state.data.toString().replace(/•/g, " ")}</div>}
</div>
<div class="col-md-5">
<input type="button" class="btn btn-success" id="convert" value="Convert" onClick={this.click} disabled={this.state.isLoading}/>
<input type="button" class="btn btn-danger" id="clear" value="Clear" onClick={this.resetForm}/>
</div>
</div>I am attempting to position the button on the right side of the grey box to create a horizontal alignment with all text boxes and buttons.
When trying to use inline-block on the div class col-md-5, it causes everything to shift vertically instead of horizontally.
Below is the CSS code:
h2{
font-family: "Times New Roman", Times, serif;
font-style: normal;
}
ul{
list-style-type: none;
}
.col-md-5{
margin: auto;
}
*{ margin: 0; padding: 0; }
#template,
#render,
#values {
width: 100%;
min-height: 300px;
resize: vertical;
font-family: "Courier New", Courier, monospace;
border: 1px solid #ccc;
}
#render {
background: #eee;
}