How do I add padding to this ?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2020-01-13T06:34:01.363" class="fromnow">Jan 13 '20 at 06:34</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2020-01-13T10:51:33.207" datetime="2020-01-13T10:51:33.207">Jan 13 '20 at 10:51</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 668 times"> <span class="fc-light mr2">Viewed</span> 668 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="59711544" data-ownerid="12537508" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="59711544"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The is not resizable and It looks all weird and is not lined up :(</p> <p><a class="external-link" href="https://i.stack.imgur.com/cOunS.png" rel="nofollow noreferrer"><img alt="What is looks like now (the amount obviously)" src="../../images/3851095234.webp"/></a></p> <p>The amount is the textarea because I need it to be a textarea, not an input because I need to use .innerHTML in javascript to change the amount value when I click the arrows.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea { width: 21%; margin-left: 12px; font-size: 18px; padding-left: 1.5em; font-weight: bold; background-color: #202023; border-radius: 10px; border: none; color: white; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="myTextArea" placeholder="Amount"></textarea></code></pre> </div> </div> <p>I would also love to have the textarea align with the other input/button!</p> <p>Thanks for your time!! :)</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 13 '20 at 06:34">asked Jan 13 '20 at 06:34</time> <a href="../../users/12537508/badjar28" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/12537508.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Badjar28" /> </a> <div class="s-user-card--info"> <a href="../../users/12537508/badjar28" class="s-user-card--link">Badjar28</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11</li> <li class="s-award-bling s-award-blingbronze" title="2 bronze badges">2</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-59711544" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="59711544" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-105575676" class="comment js-comment " data-comment-id="105575676" data-comment-owner-id="11796003" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105575676_59711544"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Does this answer your question? [How can I add padding to a textarea without causing the width to increase?](https://stackoverflow.com/questions/4180827/how-can-i-add-padding-to-a-textarea-without-causing-the-width-to-increase)</span> – <a href="../../users/11796003/adam-strauss" title="1,889 reputation" class="comment-user ">Adam Strauss</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59711544/how-do-i-add-padding-to-this-textarea#comment105575676_59711544"><span title="2020-01-13T07:33:14.907 License: CC BY-SA 4.0" class="relativetime-clean">Jan 13 '20 at 07:33</span></a></span> </div> </div> </li> <li id="comment-105578187" class="comment js-comment " data-comment-id="105578187" data-comment-owner-id="12450665" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105578187_59711544"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Placing those arrows on textarea with position:absolute may help to align the textarea with textbox and button.</span> – <a href="../../users/12450665/twinkle-sharma" title="365 reputation" class="comment-user ">Twinkle Sharma</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59711544/how-do-i-add-padding-to-this-textarea#comment105578187_59711544"><span title="2020-01-13T09:19:06.367 License: CC BY-SA 4.0" class="relativetime-clean">Jan 13 '20 at 09:19</span></a></span> </div> </div> </li> <li id="comment-105581285" class="comment js-comment " data-comment-id="105581285" data-comment-owner-id="2028631" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105581285_59711544"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">can you post the full snippet so we can see the full css design which renders to answer your second query particularly. Usually floating the text input and area should do the job of alignment.</span> – <a href="../../users/2028631/pixlboy" title="1,452 reputation" class="comment-user ">pixlboy</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59711544/how-do-i-add-padding-to-this-textarea#comment105581285_59711544"><span title="2020-01-13T10:58:58.797 License: CC BY-SA 4.0" class="relativetime-clean">Jan 13 '20 at 10:58</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="59711592"></a> <div id="answer-59711592" class="answer " data-answerid="59711592" data-ownerid="10661436" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="59711592"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You could use Bootstrap. Ex:</p> <pre><code><div class="row align-items-center"> <div class="col-md-4"> Enter link input field </div> <div class="col-md-4"> Your textarea </div> <div class="col-md-4"> Create button </div> </div> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 13 '20 at 06:38">answered Jan 13 '20 at 06:38</time> <a href="../../users/10661436/henry" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10661436.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Henry" /> </a> <div class="s-user-card--info"> <a href="../../users/10661436/henry" class="s-user-card--link">Henry</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">631</li> <li class="s-award-bling s-award-blingsilver" title="10 silver badges">10</li> <li class="s-award-bling s-award-blingbronze" title="21 bronze badges">21</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-59711592" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="59711592" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-105575642" class="comment js-comment " data-comment-id="105575642" data-comment-owner-id="11796003" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105575642_59711592"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">But bootstrap is not mentioned in tags?</span> – <a href="../../users/11796003/adam-strauss" title="1,889 reputation" class="comment-user ">Adam Strauss</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59711544/how-do-i-add-padding-to-this-textarea#comment105575642_59711592"><span title="2020-01-13T07:31:47.833 License: CC BY-SA 4.0" class="relativetime-clean">Jan 13 '20 at 07:31</span></a></span> </div> </div> </li> <li id="comment-105576122" class="comment js-comment " data-comment-id="105576122" data-comment-owner-id="10661436" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105576122_59711592"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You need to explicitly import bootstrap into your project.. I know it may be a hassle for you, but I promise you its gonna be worth the reduced workload that you are gonna face, given that you style/position the tags with "width:21%"..</span> – <a href="../../users/10661436/henry" title="631 reputation" class="comment-user ">Henry</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59711544/how-do-i-add-padding-to-this-textarea#comment105576122_59711592"><span title="2020-01-13T07:53:48.640 License: CC BY-SA 4.0" class="relativetime-clean">Jan 13 '20 at 07:53</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="59715167"></a> <div id="answer-59715167" class="answer " data-answerid="59715167" data-ownerid="11913627" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="59715167"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Are the elements u want align in a single div?</p> <p>try css float for textarea. Or better if applied to all elements that need to be aligned.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 13 '20 at 10:51">answered Jan 13 '20 at 10:51</time> <a href="../../users/11913627/vishesh" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11913627.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Vishesh" /> </a> <div class="s-user-card--info"> <a href="../../users/11913627/vishesh" class="s-user-card--link">Vishesh</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>