Bootstrap grid with 3 columns does not render correctly

Question

I've got a simple bootstrap-4 3 column grid. I want the middle column to be the widest however it renders the content in the column incorrectly and the innr container an input is really thin. When I adjust the class of the central column, the left column gets smaller as expected but my container in the center remains thin and does not render correctly. I want the container and the input in the central column to inherit the width specified e.g. class="col-8". see below

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
<div class="col">
   <br /><br>
   <h2>
      <p style="text-align: left;">title</p>
   </h2>
   <br><br>
   <h6 class="font-italic">
      <span style="padding-left: 15px;">
      <a href="{{ summary['url'] }}" target="_blank" rel="noopener noreferrer" class="slink">summary </a>
      </span>
   </h6>
   <pre><p id="doc_summary"></p></pre>
   <span><a id="more|less" onclick="toggleText();" href="javascript:void(0);"></a></span>
</div>
<div class="col-8">
   <div style="text-align: center;">
      <div style="display: inline-block; text-align: justify;">
         <div class="container-fluid border pt-3 full-page justify-content-center" id="con-result">
            <pre><div id="result"></div></pre>
         </div>
         <br>
         <div>
            <input class="col-md-9" id="input_text" name="input_text" placeholder="Enter a prompt here">
            <br>
         </div>
         <br><br><br>
      </div>
   </div>
</div>
<div class="col">
    some text
</div>
</div>
</div>

CSS:

.full-page {
    height: 58vh;
    overflow-y: scroll;
    border-radius: 20px;
}

Any help would be great, thanks!

Here is a Demo

Answer 1

Lets look at this portion of your code:

You have <div style="display: inline-block; text-align: justify;">

inline-block allows to set a width and height on the element. That being said, you can either change the display to be something else (like grid), or set a width of 100% on that div element. This should give you the output you want, if I understand the question correctly.