title: SAPUI5 HBox Align Items
body: <p>I'm new to SAPUI5 Development... Luckily i'm only working with frontend but still need some help. It's purely a matter of design....</p>
  <ol>
  <li><p>I can't get the 'ShowSuggestion' button to move to end of the input field</p>
  </li>
  <li><p>I want my label and image centered and side to side</p>
  </li>
  </ol>
  <p>Here's how my current screen looks like:</p>
  <blockquote>
  <p><img src="https://i.stack.imgur.com/YRMJH.png" alt="Actual look on my app" /></p>
  </blockquote>
  <p>And here's how I want it to look:</p>
  <blockquote>
  <p><img src="https://i.stack.imgur.com/NDmK9.png" alt="What I want" /></p>
  </blockquote>
  <p>Here's the code for both cases:
  1)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        this.transmitter = new sap.m.Input({
              width: myCurrentData.IS_MOBILE ? "90%" : "100%",
              id : this.createId("transmitterControl"),
              value : "{transmitter&gt;serviceName}",
              enabled : true,
              editable : true,
              showSuggestion : true,
              showValueHelp : true,
              valueHelpOnly : true,
              valueHelpRequest : oCon.handleValueHelp,
              suggestionItems:{
                  path:"/transmiters",
                  template: new sap.ui.core.Item({text:"{transmitter/serviceId}", key:"{transmitter/serviceId}"})
              },
              change : function (evt) {
                  oCon.onInputControlChange(evt);
              },
          });
  
          this.div_transmitter = new sap.m.VBox({
  
              items: [
                  new sap.m.Label({ alignItems: sap.m.FlexAlignItems.Center,
                      justifyContent: sap.m.FlexJustifyContent.Center,
                      textAlign: "Center",
                      text: "Selecciona un servicio"
                  }).addStyleClass("Text_Big font_bold"),
                  new sap.m.HBox({
                      width:"100%",
                      items: [
                          this.transmitter
                      ]
                  })
              ]
          }).addStyleClass("Content_Fields_DIV");</code></pre>
  </div>
  </div>
  </p>
  <p>2)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> this.referencelabel = new sap.m.HBox({
              width:"100%",
              justifyContent : sap.m.FlexJustifyContent.Start,
              alignItems : sap.m.FlexAlignItems.Center,
              items: [
  
                          new sap.m.Label({
                              textAlign: "End",
                              text : "{i18N&gt;payments.services.payForService.referenceNumber}"
                          }).addStyleClass("Text_Big font_bold"),
                          new sap.m.Image({
                              id: this.createId('servicePaymentQuestion'),
                              src: IMAGES.CUSTOMER.QUESTION
                          }).addStyleClass("Enrollment_TDD_Camera")
                      ]
  
  
  
          }),</code></pre>
  </div>
  </div>
  </p>