Can I override the default List item layout

I have a page where I want to have a prompt and value at the top of my page (and a graph underneath).

I use the following markup…


     slide-zoom {
	   // I seemed to need to do this to get top alignment
	   vertical-align: top;
	   text-align: top;
	   height: 100%;

	 .select-label {
		text-align: center;

	  .select-control {
		text-align: left;

       <ion-label class='select-label'>Value</ion-label>
       <ion-select #valSel class='select-control'> 
          [ngModel]='selectedCode' (ionChange)='onChanged($event)'>
          <ion-option *ngFor='let d of data' value="{{d.code}}">{{d.description}}</ion-option>

I want to align the label left, so there is just enough room for the label and then use the rest for the select control. As can be seen I run out of room for the select…


I am struggling to override the layout, I have them both at 50% at the moment. I have tried applying all sorts of styling but cannot get it (I can’t find the style that sets them at 50% width)

Is there a way to override this?

Thanks in advance for any help!

Found it. It was just the max-width…

 .select-control {
     text-align: left;